简介

• Element在Vue实例内注册了一个$message方法用于主动操作后的反馈提示，与Notification的区别是后者更多用于系统级通知的被动提醒。

基础用法

• $message方法接收一个字符串或对象作为参数，并将其显示为正文内容（当入参为对象时，将其‘message’字段显示为正文，该字段值可以是一个字符串或VNode）。从顶部弹出，默认3s后自动消失。

        <div>
            <el-button :plain="true" @click="open">打开消息提示</el-button>
            <el-button :plain="true" @click="openVn">VNode</el-button>
        </div>
        
<script>
  export default {
    methods: {
            open(){
                this.$message('这是一条消息提示');
            },
            openVn(){
                const h=this.$createElement;
                this.$message(
                    { //入参为一个对象
                        message:h('p',null,[h('span',null,'内容可以是 '), //定义对象内的message字段
                            h('i',{style:'color:teal'},'VNode')])} //字段值为一个$createElement方法返回值VNode
                    );
            },
    }
  }
</script>

• createElement函数（h函数）接收三个参数，第一个是标签名，第二个是标签所包含的属性（需包装成一个对象），第三个是子虚拟节点（可以是字符串形式或数组形式；如果父节点有文本内容也写在此处）。该函数返回一个虚拟DOM，我们叫它虚拟节点（VirtualNode，简写为VNode），它所包含的信息会告诉Vue页面上需要渲染什么样的节点，和真实节点的区别其实就是渲染机制的不同而已。

<!-- 在render函数中渲染 -->
render:function(createElement){
  return createElement("div",{id:"lxc"},[this.name,createElement("p",this.age)])
}

<!-- 渲染结果 -->
<div id="lxc">
    {{name}}
    <p>{{age}}</p>
</div>

• 效果：
• 

不同状态

• 通过在传入$message方法中的对象中添加type字段可定义不同的状态，默认为info。
• 

可关闭

• 通过在入参对象内添加showClose字段并设置为true可令弹出框支持手动关闭：
• 

文字居中

• 通过在入参对象中添加center字段并设置为true可使弹框内的文字水平居中。

使用HTML字段

• 通过在入参对象中添加dangerouslyUseHTMLString字段并设置为true，同时将message字段设置为一个HTML语句就会被当做HTML片段渲染。
• 注意：在网站是动态渲染任何HTML是非常危险的，容易导致XSS攻击。因此在dangerouslyUseHTMLString打开的情况下，请确保message的内容是可信的（永远不要将用户提交的内容赋给message字段）。

单独引用

• 前面使用的是全局方法，现在介绍一下单独引入Message来调用的方式：

import {Message} from 'element-ui';
//调用写法
Message(options);
//当然也为每个type定义了各自的方法
Message.success(options);
//调用Message或this.$message都会返回当前Message实例，如果需要手动关闭实例：
Message.close();
//手动关闭所有实例
Message.closeAll();

• options可包含字段：

• 

• createElement函数参考文章

• 官方文档

• 代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”