# Message 全局提示
# Message 概述
轻量级的信息反馈组件,在顶部居中显示,并自动消失。有多种不同的提示状态可选择。
# Message 代码示例
# 普通提示
最基本的提示,默认在 1.5 秒后消失。
# 提示类型
不同的提示状态:成功、警告、错误。
# 加载中
Loading 的状态,并异步在某个时机移除。
# 自定义时长
自定义时长,也可以在 Message.config()
中全局配置,详见 API。
# 可关闭
将参数设置为一个对象,并指定 closable
为 true 后可以手动关闭提示,完整参数详见 API。
# 关闭事件
onClose触发自定义关闭事件。
# Message API
# Message instance
this.$hMessage.info(config)
this.$hMessage.success(config)
this.$hMessage.warning(config)
this.$hMessage.error(config)
this.$hMessage.loading(config)
以上方法隐式的创建及维护 Vue 组件。参数 config 可以是字符串或对象,当为字符串时,直接显示内容,当为对象时,具体说明如下:
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
content | 提示内容 | String | - |
duration | 自动关闭的延时,单位秒,不关闭可以写 0 | Number | 1.5 |
onClose | 关闭时的回调 | Function | - |
closable | 是否显示关闭按钮 | Boolean | false |
customerClass | 自定义类名,传入一个自定义类名,将包裹在外层,用于实现自定义样式 (v1.12.0) | String | - |
另外提供了全局配置和全局销毁的方法:
this.$hMessage.config(options)
this.$hMessage.destroy()
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
top | 提示组件距离顶端的距离,单位像素 | Number | 16px |
infoTop | info 类型提示组件距离顶端的距离,单位像素(v1.0.28) | Number | -- |
successTop | success 类型提示组件距离顶端的距离,单位像素(v1.0.28) | Number | -- |
warningTop | warning 类型提示组件距离顶端的距离,单位像素(v1.0.28) | Number | -- |
errorTop | error 类型提示组件距离顶端的距离,单位像素(v1.0.28) | Number | -- |
duration | 默认自动关闭的延时,单位秒 | Number | 1.5 |
infoDuration | info 类型提示组件默认自动关闭的延时,单位秒(v1.0.29) | Number | -- |
successDuration | success 类型提示组件默认自动关闭的延时,单位秒(v1.0.29) | Number | -- |
errorDuration | error 类型提示组件默认自动关闭的延时,单位秒(v1.0.29) | Number | -- |
warningDuration | warning 类型提示组件默认自动关闭的延时,单位秒(v1.0.29) | Number | -- |