Tune UI消息提示组件
消息提示组件用于在页面中展示操作反馈或系统提示，支持多种消息类型和样式，可以自动消失或手动关闭，是一种轻量级的反馈方式。
基础用法
基础的消息提示，包含成功、警告、信息和错误四种类型。
消息提示组件提供了四种不同类型，用于不同场景下的反馈。
显示代码
消息样式
可以自定义消息的宽度、内边距、图标和朴素样式。
消息提示组件支持自定义样式，如宽度、内边距、图标和朴素样式。
显示代码
通知类型
支持四个方向的通知消息展示，可以包含标题和内容。
消息通知支持四个方向的弹出，适用于需要更强提示效果的场景。
弹出位置
通知类型
显示代码
关闭配置
支持手动关闭、自动关闭和按ESC键关闭等多种关闭方式。
消息提示支持多种关闭方式配置，包括手动关闭、ESC键关闭和自动关闭。
提示：
- 手动关闭：设置
duration: 0和isClose: true实现永久显示并手动关闭 - ESC键关闭：设置
closeOnPressEscape: true开启ESC键关闭功能 - 自动关闭：设置
duration为指定的毫秒数实现自动关闭
显示代码
自定义配置
可以自定义消息的挂载位置和显示位置。
消息提示组件支持自定义挂载容器和显示位置。
自定义挂载容器
通过设置 appendTo 属性指定消息挂载的DOM节点
自定义挂载容器，消息将显示在这里
自定义显示位置
通过设置 custom 属性指定消息的显示坐标
显示代码
事件处理
消息提示提供了关闭回调事件，支持多条消息堆叠展示。
消息提示组件提供了关闭回调事件，支持多条消息堆叠展示。
关闭回调
多消息堆叠
显示代码
消息提示 API
Message 方法
| 方法名称 | 说明 | 参数 | 返回值 |
|---|---|---|---|
TMessage.message | 显示普通消息 | (content: string, type?: string, options?: object) => string | 消息实例的唯一ID |
TNotification.message | 显示通知消息 | (title: string, content: string, type?: string, options?: object) => string | 消息实例的唯一ID |
Message 配置项
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
type | 消息类型 | string | success / warning / info / danger | info |
plain | 是否使用朴素样式 | boolean | true / false | false |
messageType | 消息展示方式 | string | default / notice | default |
title | 标题(通知模式可用) | string | — | — |
position | 位置(通知模式可用) | string | topRight / bottomRight / bottomLeft / topLeft | topRight |
content | 消息内容 | string | — | — |
icon | 图标类型 | string | — | 根据type自动选择 |
duration | 显示时间(毫秒) | number | — | 2600 |
radius | 圆角大小 | array / number | — | [6, 6, 6, 6] |
padding | 内边距大小 | array / number | — | [8, 12, 8, 12] |
width | 消息框宽度 | string | — | — |
appendTo | 消息渲染的目标位置 | string / element | — | body |
custom | 自定义位置坐标 | object {x: string, y: string} | — | {x: "50%", y: "24px"} |
maxLength | 最大消息数量 | number | — | 8 |
isClose | 是否显示关闭按钮 | boolean | true / false | false |
closeCallback | 关闭回调函数 | function(id: string) | — | — |
closeOnPressEscape | 是否支持ESC键关闭 | boolean | true / false | true |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| close | 消息关闭时触发 | (id: string) |
| click | 消息点击时触发 | (event: MouseEvent) |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 消息内容 |
| icon | 自定义图标 |
| close | 自定义关闭按钮 |
方法
| 方法名 | 说明 | 参数 |
|---|---|---|
| closeMessage | 关闭消息 | — |
样式变量
消息提示组件使用了以下样式变量，可通过 SCSS 变量进行自定义：
| 变量名 | 说明 |
|---|---|
| $theme-color-primary | 主题色-主要 |
| $theme-color-success | 主题色-成功 |
| $theme-color-info | 主题色-信息 |
| $theme-color-warning | 主题色-警告 |
| $theme-color-danger | 主题色-危险 |
| $color-white | 白色 |
| $bg-color-default | 默认背景颜色 |
| $bg-color-model | 模态背景颜色 |
| $text-color-default | 默认文本颜色 |
| $z-index-up | 上层层级 |