Message 全局提示

基础用法

从顶部出现，3 秒后自动消失。

<c-button icon="rising1" @click="onMessage('top')">顶部提示</c-button>
<c-button icon="reduce" @click="onMessage('center')">居中提示</c-button>
<c-button icon="falling" @click="onMessage('bottom')">底部提示</c-button>

onMessage(position) {
  this.$message({
    message: "保存成功",
    position,
    autoClose: 3,
    closeButton: {
      callback: message => {
        console.log(message);
      }
    }
  });
}

显示代码

支持HTML

message 属性支持传入 HTML 片段。

<c-button icon="rising1" @click="onMessage2('top')">HTML Dom</c-button>

onMessage2(position) {
  this.$message({
    message: "<i>HTML DOM</i>",
    position,
    autoClose: 3,
    enableHtml: true,
    closeButton: {
      callback: message => {
        console.log(message);
      }
    }
  });
}

显示代码

属性

参数	说明	类型	可选值	默认值
position	弹出的位置	String	top / bottom / center	top
autoClose	自动关闭，可直接设置自动关闭的时长	Boolean, Number	——	3
enableHtml	启用HTML	Boolean	——	false
closeButton	关闭按钮	Object	——	false