Message 消息提示 ​

常用于全局展示一些轻量级的交互反馈信息，如操作成功、失败等。

代码示例#

API#

Message 方法#

组件实例内提供了几种基础的打开消息的方法：

• Message.open(content[, duration] | options)
• Message.primary(content[, duration] | options)
• Message.info(content[, duration] | options)
• Message.success(content[, duration] | options)
• Message.warning(content[, duration] | options)
• Message.error(content[, duration] | options)

以及 1 个复合的打开消息的方法：

• Message.judge(state, successContent | successOptions, errorContent | errorOptions[, duration])

在使用组合式 api 时需要 import { Message } from 'vexip-ui' 后使用 Message.open(...)。

此外，还提供了两个手动关闭消息的方法：

• Message.close(key)
• Message.clear()

当直接调用 Message.close() 而不传入 key 时和 Message.clear() 效果相同。

在打开消息的方法调用后会返回一个函数，该函数可以用于手动关闭刚刚打开的消息：

const cancel = Message.open(options)

// 立即关闭该消息
cancel()

需要修改组件的默认属性值时，可以这样做：

// 除了选项值以外，还可以修改 placement 为 'top' | 'bottom' 来改变消息的位置
Message.config({ placement, ...options })

有时需要创建多个消息管理器以便于管理各类消息：

// 这是一个全新的消息组件
const myMessage = Message.clone()

myMessage.config({ placement: 'bottom' })

或者在引入组件时进行克隆：

import { createApp } from 'vue'
import { Message } from 'vexip-ui'

const myMessage = Message.clone()

myMessage.config({ placement: 'bottom' })
createApp().use(myMessage, { property: '$myMessage' })

某些场景下，需要在全屏元素上显示消息，此时可以将组件的渲染位置迁移：

Message.transferTo('#a-new-place')

// 重新迁移回 body
Message.transferTo(document.body)

预设类型#

type MessageType = 'primary' | 'info' | 'success' | 'warning' | 'error'
type MessagePlacement = 'top' | 'bottom'

Message 选项#

Message 配置#