Element-Ui组件（三十）Message 消息提示

Element-Ui组件（三十）Message 消息提示

本文来源于Element官方文档：

http://element-cn.eleme.io/#/zh-CN/component/message

基础用法

普通消息提示

Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

<template>
  <el-button :plain="true" @click="open">打开消息提示el-button>
  <el-button :plain="true" @click="openVn">VNodeel-button>
template>

<script>
  export default {
    methods: {
      open() {
        this.$message('这是一条消息提示');
      },

      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
      }
    }
  }
script>

使用Html片段的消息提示

将dangerouslyUseHTMLString属性设置为 true，message 就会被当作 HTML 片段处理。

<template>
  <el-button :plain="true" @click="openHTML">使用 HTML 片段el-button>
template>

<script>
  export default {
    methods: {
      openHTML() {
        this.$message({
          dangerouslyUseHTMLString: true,
          message: '这是 HTML 片段'
        });
      }
    }
  }
script>

options：

参数	类型	说明	可选值	默认值
message	消息文字	string / VNode	—	—
type	主题	string	success/warning/info/error	info
iconClass	自定义图标的类名，会覆盖 type	string	—	—
dangerouslyUseHTMLString	是否将 message 属性作为 HTML 片段处理	boolean	—	false
customClass	自定义类名	string	—	—
duration	显示时间, 毫秒。设为 0 则不会自动关闭	number	—	3000
showClose	是否显示关闭按钮	boolean	—	false
center	文字是否居中	boolean	—	false
onClose	关闭时的回调函数, 参数为被关闭的 message 实例	function	—	—

方法

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