Message 消息提示

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

基础用法

从顶部出现，3 秒后自动消失。

<template>
  <Button :plain="true" @click="open">Show message</Button>
  <Button :plain="true" @click="openVn">VNode</Button>
</template>

<script setup>
import { h } from 'vue'
import Button from '@/components/Button/Button.vue'
import { createMessage } from '@/components/Message/methods'

const open = () => {
  createMessage({ message: 'This is a message.' })
}
const openVn = () => {
  createMessage({
    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode')
    ])
  })
}
</script>

<style lang="scss" scoped></style>

不同状态

用来显示「成功、警告、消息、错误」类的操作反馈。

<template>
  <Button :plain="true" @click="open('info')">Message</Button>
  <Button :plain="true" @click="open('success')">Success</Button>
  <Button :plain="true" @click="open('warning')">Warning</Button>
  <Button :plain="true" @click="open('danger')">Error</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
import { createMessage } from '@/components/Message/methods'

const open = (type) => {
  createMessage({ message: 'This is a message.', type })
}
</script>

<style lang="scss" scoped></style>

可关闭

可以添加关闭按钮。

<template>
  <Button :plain="true" @click="open('info')">Message</Button>
  <Button :plain="true" @click="open('success')">Success</Button>
  <Button :plain="true" @click="open('warning')">Warning</Button>
  <Button :plain="true" @click="open('danger')">Error</Button>
</template>

<script setup>
import Button from '@/components/Button/Button.vue'
import { createMessage } from '@/components/Message/methods'

const open = (type) => {
  createMessage({ message: 'This is a message.', type, showClose: true })
}
</script>

<style lang="scss" scoped></style>

Message 配置项

参数	说明	类型	可选值	默认值
type	消息提示类型	string	success/warning/info/error	info
message	消息文字	string	—	—
showClose	是否显示关闭按钮	boolean	—	false
center	文字是否居中	boolean	—	false
duration	显示时间, 毫秒。设为 0 则不会自动关闭	number	—	3000
onClose	关闭时的回调函数，会传入关闭函数作为参数	function	—	—
offset	消息框距离顶部的偏移量	number	—	16

Message 方法

调用 createMessage 会返回当前 Message 的实例。 如果需要手动关闭实例，可以调用它的 close 方法。

方法名	说明	类型
destory	关闭当前的 Message	function