vitepress-theme-mist

Appearance

2025-08-19
1102
4.8m

简介 ​

MtMessage 是一个用于显示全局消息提示的 Vue 组件。它支持多种消息类型、自动关闭、手动关闭、消息分组等功能，可以在页面任何位置调用显示消息提示。

基本用法 ​

Message 组件通过编程方式调用，不需要在模板中直接使用。可以通过 MtMessage() 函数或其类型方法来显示消息。

示例 ​

下面是一个使用 MtMessage 组件的简单示例：

API ​

类型定义 ​

Message 组件支持以下类型：

  • primary: 主要消息
  • success: 成功消息
  • info: 信息消息
  • warning: 警告消息
  • error: 错误消息

方法 ​

MtMessage(options, appContext?) ​

显示一条消息，返回一个消息处理器对象。

参数：

  • options: 消息配置对象或消息内容字符串
  • appContext: 应用上下文（可选）

返回值：

typescript
{
  close: () => void  // 关闭消息的方法
}

MtMessage.closeAll(type?) ​

关闭所有消息或指定类型的消息。

参数：

  • type: 要关闭的消息类型（可选）

类型方法 ​

每种消息类型都有对应的快捷方法：

  • MtMessage.primary(options, appContext?)
  • MtMessage.success(options, appContext?)
  • MtMessage.info(options, appContext?)
  • MtMessage.warning(options, appContext?)
  • MtMessage.error(options, appContext?)

配置选项 ​

参数说明类型默认值
message消息内容string | VNode | (() => VNode)''
type消息类型MessageType'info'
duration显示时长（毫秒），0表示不自动关闭number3000
showClose是否显示关闭按钮booleanfalse
center是否居中显示booleanfalse
offset距离顶部的偏移量number16
customClass自定义类名string''
icon自定义图标MtIconProps["icon"]undefined
plain是否使用朴素样式booleanfalse
zIndex消息的 z-indexnumber0
grouping是否开启消息分组booleanfalse
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
onClose关闭时的回调函数() => voidundefined
appendTo消息挂载的 DOM 元素HTMLElement | stringdocument.body

使用示例 ​

基本消息 ​

javascript
// 简单文本消息
MtMessage('这是一条消息')

// 带类型的消息
MtMessage({
  message: '操作成功',
  type: 'success'
})

使用类型方法 ​

javascript
// 成功消息
MtMessage.success('操作成功')

// 错误消息
MtMessage.error('操作失败')

// 警告消息
MtMessage.warning('请注意')

// 信息消息
MtMessage.info('提示信息')

// 主要消息
MtMessage.primary('重要信息')

高级配置 ​

javascript
// 自定义配置
const handler = MtMessage({
  message: '这是一条自定义消息',
  type: 'success',
  duration: 5000,
  showClose: true,
  center: true,
  offset: 20,
  onClose: () => {
    console.log('消息已关闭')
  }
})

// 手动关闭消息
handler.close()

// 关闭所有消息
MtMessage.closeAll()

// 关闭指定类型的消息
MtMessage.closeAll('error')

HTML 内容 ​

javascript
// 使用 HTML 内容（注意：谨慎使用，避免 XSS 攻击）
MtMessage({
  message: '<strong>加粗文本</strong> <em>斜体文本</em>',
  dangerouslyUseHTMLString: true,
  type: 'warning'
})

消息分组 ​

javascript
// 开启消息分组，相同内容的消息会合并显示
MtMessage({
  message: '重复消息',
  grouping: true,
  type: 'info'
})

// 再次发送相同消息，会显示重复次数
MtMessage({
  message: '重复消息',
  grouping: true,
  type: 'info'
})

注意事项 ​

  1. 安全性: 使用 dangerouslyUseHTMLString 时要注意 XSS 攻击风险，确保 HTML 内容是可信的。

  2. 性能: 大量消息同时显示可能会影响性能，建议合理设置 duration 和使用 grouping 功能。

  3. 层级: 消息会自动管理 z-index，确保新消息显示在旧消息之上。

  4. 响应式: 消息会监听窗口大小变化，自动调整位置。

  5. 键盘事件: 按空格键可以关闭当前获得焦点的消息。