Appearance
Message 消息提示
用于页面顶部展示轻量反馈，支持成功、错误、警告类型和自动关闭。
示例
基础用法
MtMessage 是函数式调用，不需要在模板中声明组件，调用后会自动在顶部创建消息并在超时后自动关闭。
消息类型
提供三种内置类型：success、error、warning，每种类型有对应的快捷方法。
持续时间
通过 duration 控制自动关闭时间，单位毫秒。设为 0 不会自动关闭。
偏移量
通过 offset 控制消息距离窗口顶部的偏移量。
关闭与回调
可以手动关闭消息，也可以监听关闭回调。closeAll() 可以关闭所有当前显示的消息。
HTML 内容
消息内容支持 HTML，可以展示格式化文本。
API
Options
| 属性名 | 说明 | 类型 | 默认值 | 示例 |
|---|---|---|---|---|
| message | 消息文字 | string | 必填 | { message: '保存成功' } |
| type | 消息类型 | 'success' | 'error' | 'warning' | 'success' | { type: 'warning' } |
| duration | 显示时间，单位 ms；设为 0 不自动关闭 | number | 3000 | { duration: 0 } |
| show-close | 是否显示关闭按钮 | boolean | false | { showClose: true } |
| offset | 距离窗口顶部的偏移量 | number | 16 | { offset: 48 } |
| on-close | 关闭回调 | Function | - | { onClose: () => handleClose() } |
Methods
| 方法名 | 说明 | 返回值 | 示例 |
|---|---|---|---|
| MtMessage(options) | 打开消息提示 | MessageHandler | MtMessage({ message: '保存成功' }) |
| MtMessage.success(options) | 打开成功提示 | MessageHandler | MtMessage.success('保存成功') |
| MtMessage.error(options) | 打开错误提示 | MessageHandler | MtMessage.error('保存失败') |
| MtMessage.warning(options) | 打开警告提示 | MessageHandler | MtMessage.warning('请检查输入') |
| MtMessage.closeAll(type?) | 关闭全部或指定类型提示 | void | MtMessage.closeAll('success') |
Handler
| 方法名 | 说明 | 类型 | 示例 |
|---|---|---|---|
| close | 关闭当前消息提示 | () => void | handler.close() |
Slots
该方法式组件不提供插槽。
注意事项
- 消息文案应简短明确，避免承载复杂操作。
- 错误提示建议说明原因或给出可执行的下一步。