Yy Craft

主题

Message 消息提示 ​

内容 ​

查看示例
vue
<script setup lang="ts">
import { Basketball } from '@vicons/ionicons5'
import { h } from 'vue'
import { Icon, useMessage } from 'yy-craft'

const { message } = useMessage()
</script>

<template>
  <yy-flex>
    <yy-button @click="message('这是一条消息')">
      显示一条消息
    </yy-button>
    <yy-button
      @click="message(() => h(Icon, { size: 20 }, () => h(Basketball)))"
    >
      显示自定义内容
    </yy-button>
  </yy-flex>
</template>

消息的类型 ​

查看示例
vue
<script setup lang="ts">
import { useMessage } from 'yy-craft'

const { message } = useMessage()

function show(type: 'success' | 'warning' | 'error' | 'info' | 'loading') {
  message(`Type: ${type}`, { type })
}
</script>

<template>
  <yy-flex>
    <yy-button @click="show('success')">
      Success
    </yy-button>
    <yy-button @click="show('warning')">
      Warning
    </yy-button>
    <yy-button @click="show('error')">
      Error
    </yy-button>
    <yy-button @click="show('info')">
      Info
    </yy-button>
    <yy-button @click="show('loading')">
      Loading
    </yy-button>
  </yy-flex>
</template>

持续时间和手动关闭 ​

查看示例
vue
<script setup lang="ts">
import type { MessageReturn } from 'yy-craft'
import { ref } from 'vue'
import { useMessage } from 'yy-craft'

const { message } = useMessage()

const duration = ref(5000) // 设置持续时间为5秒

function show() {
  message(() => `这个消息将显示5秒, 还剩${duration.value}毫秒`, {
    duration: duration.value,
  })
  changeDuration(duration.value)
}

function changeDuration(newDuration: number) {
  const now = Date.now()
  requestAnimationFrame(() => {
    const _now = Date.now()
    const gap = _now - now
    duration.value = newDuration - gap
    if (duration.value < 0) {
      duration.value = 0 // 确保持续时间不会为负
    }
    else {
      changeDuration(duration.value)
    }
  })
}

let messageInstance: MessageReturn | null = null
function createEternityMessage() {
  messageInstance = message('这是一个永远都不会消失的消息', { duration: 0 })
}
function tryCloseEternityMessage() {
  messageInstance?.destroy()
  messageInstance = null
}
</script>

<template>
  <yy-flex>
    <yy-button @click="show">
      显示一个持续5秒的消息
    </yy-button>
    <yy-button @click="createEternityMessage">
      显示一个永远都不会消失的消息
    </yy-button>
    <yy-button @click="tryCloseEternityMessage">
      关闭左边这个按钮创建的Message
    </yy-button>
  </yy-flex>
</template>

显示状态 ​

查看示例
vue
<script setup lang="ts">
import { useMessage } from 'yy-craft'

const { message } = useMessage()

function show() {
  message('鼠标移入我我将永远存在', { keepAliveOnHover: true, duration: 2000 })
}
</script>

<template>
  <yy-button @click="show">
    显示一个消息
  </yy-button>
</template>

修改类型 ​

查看示例
vue
<script setup lang="ts">
import type { MessageReturn } from 'yy-craft'
import { ref } from 'vue'
import { useMessage } from 'yy-craft'

const { message } = useMessage()

const types = [
  'success',
  'info',
  'warning',
  'error',
  'loading',
  undefined,
] as const
let messageInstance1: MessageReturn | null
let typeIndex = 0
const messageType = ref(types[typeIndex])
function openMessage1() {
  if (messageInstance1)
    return
  messageInstance1 = message('我是一条消息', {
    duration: 0,
    type: messageType.value as any,
  })
}
function changeText() {
  if (!messageInstance1)
    return
  messageInstance1.content
    = messageInstance1.content === '我是一条消息' ? '你好' : '我是一条消息'
}
function changeType() {
  if (!messageInstance1)
    return
  messageInstance1.type = types[++typeIndex % types.length]
}

function closeMessage1() {
  messageInstance1?.destroy()
  messageInstance1 = null
}
</script>

<template>
  <yy-flex>
    <yy-button @click="openMessage1">
      打开
    </yy-button>
    <yy-button @click="changeType">
      切换类型
    </yy-button>
    <yy-button @click="changeText">
      换一句话试试吧
    </yy-button>
    <yy-button @click="closeMessage1">
      关闭
    </yy-button>
  </yy-flex>
</template>

创建不同位置的消息 ​

查看示例
vue
<script setup lang="ts">
import { useMessage } from 'yy-craft'

const { message } = useMessage()
</script>

<template>
  <yy-flex>
    <yy-button @click="message('top', { placement: 'top' })">
      默认(正上)
    </yy-button>
    <yy-button @click="message('bottom', { placement: 'bottom' })">
      正下
    </yy-button>
    <yy-button @click="message('top-left', { placement: 'top-left' })">
      左上
    </yy-button>
    <yy-button @click="message('top-right', { placement: 'top-right' })">
      右上
    </yy-button>
    <yy-button @click="message('bottom-left', { placement: 'bottom-left' })">
      左下
    </yy-button>
    <yy-button @click="message('bottom-right', { placement: 'bottom-right' })">
      右下
    </yy-button>
  </yy-flex>
</template>

<style scoped></style>

上下文 ​

ts
import { getCurrentInstance } from 'vue'
import { useMessage } from 'yui-vue'

const { appContext } = getCurrentInstance()

useMessage(appContext)

API ​

参数说明类型默认值
id消息唯一标识string-
content消息内容string | () => VNodeChild''
type消息类型'success' | 'warning' | 'error' | 'info' | 'loading'-
duration持续时间（毫秒）number3000
keepAliveOnHover鼠标悬停时不消失boolean-
placement显示位置DefaultPlacement'top'