# 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 --