Message 消息提示

介绍

在页面顶部展示消息提示，支持函数调用和组件调用两种方式。

单独引用

Message 是一个函数，调用后会直接在页面顶部弹出相应的提示。

import { Message } from 'mind-ui-vue';
Vue.use(Message);

全局方法

如果你完整引入了 Mind UI Vue，它会在 Vue.prototype 上添加全局方法 $message。

示例

基础用法

this.$message("这是一条默认提示");

通知类型

支持 primary、success、warning、error 四种通知类型，默认为 primary。

// 成功提示
this.$message.success("提示内容");

// 警告提示
this.$message.warning("提示内容");

// 危险提示
this.$message.error("提示内容");

自定义通知

自定义消息通知展示时长。

this.$message({
  content: "我将在 5 秒后消失",
  duration: 5000,
});

Api

Methods

参数	说明	类型	可选值	默认值
content	提示内容	String	—	—
type	类型	String	primary success warning danger	primary
duration	持续时间，单位 ms。设为 0 则不会自动关闭	Number	—	2000
showClose	是否显示关闭按钮	Boolean	—	false
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	Function	—	—
zIndex	层级	Number	—	2000

Events

调用 Message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

方法名称	说明
close	关闭当前 Message