Message 消息提示
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
ts
import { Message } from '@szhn/dh-design-pc'基础用法
默认情况下在顶部显示，并在 3 秒后自动消失。
不同状态
用来显示默认、帮助、成功、警告、错误、等待类的操作反馈。通过 type、icon 和 customClass 字段组合对应主题。
Plain 背景
设置 plain 为 true 时仍保持 PC 设计稿里的白色卡片样式。
可关闭的消息提示
默认的 Message 是不可以被手动关闭的，通过 showClose 开启关闭按钮，并可通过 duration 控制展示时长，duration 为 0 时消息不会自动关闭。
使用 HTML 片段作为正文内容
将 dangerouslyUseHTMLString 属性设置为 true，message 就会被当作 HTML 片段处理。请确保内容可信，避免 XSS 攻击。
分组消息合并
设置 grouping 为 true，内容相同的消息将以徽标形式合并展示。
消息位置
通过 placement 控制消息的出现位置，支持 top / bottom 等。
全局方法
如果以插件方式全量注册，app.config.globalProperties 上会注入 $message，可在组件实例中直接调用。
按需引入
ts
import { Message } from '@szhn/dh-design-pc'
Message({ message: '这是一条消息提示' })
Message.success({ message: '保存成功' })
Message.closeAll()应用上下文继承
消息方法支持接收当前应用的 appContext 作为第二个参数，以继承全局配置。
ts
import { getCurrentInstance } from 'vue'
import { Message } from '@szhn/dh-design-pc'
const { appContext } = getCurrentInstance()!
Message({}, appContext)API
配置项（部分）
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| message | 消息文字 | string / VNode / Function | '' |
| type | 消息类型 | success / warning / info / error / primary | info |
| plain | 是否纯色背景 | boolean | false |
| icon | 自定义图标 | string / Component | — |
| dangerouslyUseHTMLString | 是否把 message 作为 HTML 片段 | boolean | false |
| duration | 展示时长（毫秒），为 0 则不自动关闭 | number | 3000 |
| showClose | 是否展示关闭按钮 | boolean | false |
| offset | 距离视口的偏移量 | number | 16 |
| appendTo | 指定挂载根节点 | string / HTMLElement | — |
| grouping | 合并相同内容的消息 | boolean | false |
| repeatNum | 合并场景下的初始重复次数 | number | 1 |
| placement | 消息位置 | top / bottom | top |
| onClose | 关闭回调 | Function | — |
方法
| 名称 | 说明 |
|---|---|
| Message.success / warning / info / error / primary | 展示对应类型的消息 |
| Message.closeAll | 关闭所有消息实例 |
| instance.close | 关闭当前消息实例 |
更多配置参见 Element Plus Message。