# Message 全局提示
常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。
# 代码演示
🎉 Features
V2.3.6
新增属性 position 可以让 Message 从屏幕顶部、四角、中间的任意一个位置弹出。
V2.3.7
新增属性 textOverflow: visible 设置文字超出最大宽度时换行且以滚动方式查看。
V2.3.8
新增属性 level 设置强提示、弱提示新的视觉风格。
V2.4.3
新增属性 key 来更新内容。
# 全局方法
WinDesign 为 Vue.prototype 添加了全局方法 $Message。因此在 vue instance 中可以采用本页面中的方式调用 Message
。
单独引入 Message
:
import { Message } from 'win-design'
1
此时调用方法为 Message(options)
。我们也为每个 type 定义了各自的方法,如 Message.success(options)
。并且可以调用 Message.closeAll()
手动关闭所有实例。
# API
# Options
参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
---|---|---|---|---|---|
close-text | 文本形式的关闭按钮 | String | — | — | v2.0.0 |
custom-class | 自定义类名 | String | — | — | |
dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | Boolean | — | false | |
detail | 详情内容(强提示、弱提示不支持此配置) | String | — | — | v2.0.0 |
duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | Number | — | 3000 | |
icon-class | 自定义图标的类名,会覆盖 type | String | — | — | |
message | 消息文字 | String | VNode | — | — | |
on-close | 关闭时的回调函数, 参数为被关闭的 message 实例 | Function | — | — | |
offset | Message 距离窗口顶部的偏移量 | Number | — | 20 | |
show-close | 是否显示关闭按钮 | Boolean | — | false | |
type | 消息类型 | String | 'success' | 'warning' | 'info' | 'error' | — | v2.0.0 |
position | 自定义弹出位置 | String | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'middlw' | 'top' | V2.3.6 |
text-overflow | 设置文字超出怎样显示(弱提示不支持此配置) | String | 'visible' | 'ellipsis' | 'ellipsis' | V2.3.7 |
level | 设置视觉等级 | String | 'strong' | 'weak' | 'middle' | V2.3.8 |
key | 当前提示的唯一标志 | String / Number | V2.4.3 | ||
dangerouslyDetailUseHtmlString | 是否将 detail 属性作为 HTML 片段处理 | Boolean | — | false | V2.4.17 |
# Methods
调用 Message
或 this.$Message
会返回当前 Message 的实例。如果需要手动关闭实例,可以调用它的 close
方法。
方法名 | 说明 | Version |
---|---|---|
close | 关闭当前的 Message |