全局提示

示例

基础用法

使用Message提供的静态方法,展示提示。包括:info, error, warning, success。提示默认会在5s后自动关闭

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
自定义时长

提示默认会在5s后关闭,我们可以指定duration来自定义时长(单位ms)。当指定为0时,提示不会自动关闭。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)
自定义展示内容

当需要自定义提示的内容时,我们可以将Message当做组件定义在模板中,而非调用它的静态方法。此时我们需要给Message指定唯一的key

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

如果你在Vue下全局安装KPC,可以通过this.$message引用到Message组件,所以你可以这样调用它的方法:this.$message.success('test')

属性

属性 说明 类型 默认值
content 提示内容 String | VNode undefined
duration 提示展示多长时间后自动关闭,当传入0时,提示将会一直展示。单位ms Number 5000
type 提示类型 "info" | "error" | "success" | "warning" "info"
closable 是否展示关闭按钮 Boolean true
hideIcon 是否隐藏文字前面的icon Boolean false
key 组件的key,当作为组件而非静态方法调用时,必须指定 String -
value 用于标识是否展示,可用v-model建立双向绑定 Boolean false

静态方法

方法名 说明 参数 返回值
info 普通提示 content, duration | config -
error 错误提示 content, duration | config -
success 成功提示 content, duration | config -
warning 警告提示 content, duration | config -

其中contentduration参数说明如下:

参数名 说明 类型 默认值
content 提示的内容 String | VNode undefined
duration 提示展示多长时间后自动关闭,当传入0时,提示将会一直展示。单位ms Number 5000

上述静态方法的另一种重载方式是,传入Object作为参数,此时config可以配置如下:

属性名 说明 类型 默认值
content 同上 同上 同上
duration 同上 同上 同上
type 同上 同上 同上
closable 同上 同上 同上