Message 消息提示

基础用法

从顶部出现，3秒后自动消息。createMessage方法可以接收一个字符串或者一个VNode作为参数显示在消息框中。

<script setup>
import { h } from 'vue'
import { createMessage } from '@com/Message/method'
import Button from '@com/Button/Button.vue'
const open = () => {
  createMessage({ message: '好兄弟，别跑！' })
}
const openV = () => {
  createMessage({ message: h('b', '这是粗体') })
}
</script>
<template>
  <div class="basic block">
    <Button type="primary" @click="open"> 创建文本消息 </Button>
    <Button @click="openV"> 创建 VNode 的消息 </Button>
  </div>
</template>

不同的状态

设置type 为不同消息的状态，默认是info，还有success、warning和danger可选。

<script setup>
import { createMessage } from '@com/Message/method'
import Button from '@com/Button/Button.vue'
const open = (type) => {
  createMessage({ message: 'hello world', type })
}
</script>
<template>
  <div class="basic block">
    <Button @click="open('info')"> Info </Button>
    <Button @click="open('success')" type="success"> Success </Button>
    <Button @click="open('warning')" type="warning"> warning </Button>
    <Button @click="open('danger')" type="danger"> Danger </Button>
  </div>
</template>

可关闭的提示

如果想关闭提示消息，可以把showClose设置为true。 duration默认值为3000，即自动关闭时间为3000毫秒以后，设置为0消息不回自动关闭。

<script setup>
import { createMessage } from '@com/Message/method'
import Button from '@com/Button/Button.vue'
const open = () => {
  createMessage({ message: 'hello world', showClose: true, duration: 0 })
}
</script>
<template>
  <div class="basic block">
    <Button @click="open"> 可关闭消息 </Button>
  </div>
</template>

手动关闭所有实例

message提供暴露的方法closeAll可以一次关闭所有的提示消息。

<script setup>
import { createMessage, closeAll } from '@com/Message/method'
import Button from '@com/Button/Button.vue'
const open = () => {
  createMessage({ message: 'hello world1', duration: 0 })
  createMessage({ message: 'hello world2', duration: 0 })
  createMessage({ message: 'hello world3', duration: 0 })
}
const close = () => {
  closeAll()
}
</script>
<template>
  <div class="basic block">
    <Button @click="open"> 创建三条消息 </Button>
    <Button @click="close"> 全部关闭 </Button>
  </div>
</template>

APIs

配置项

名称	描述	类型	默认值
message	消息文字	string | VNode
type	消息类型	info | success | warning | danger	info
showClose	是否显示关闭按钮	boolean	false
duration	显示时间，单位毫秒，0表示不关闭	number	3000

方法

名称	描述	类型
close	关闭当前的消息	() => void
closeAll	关闭当前所有的消息	() => void