element-ui之Message 详解

Message 消息提示 ：

引入方式：

//全局注册：
Vue.prototype.$message=Message;
//使用：
this.$message(options)
//单独引入：
import {Message} from 'element-ui'
//使用：
Message(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	—	—
offset	Message 距离窗口顶部的偏移量	number	—	20

方法：

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

方法使用注意：像定时器一样，Message有返回值；调用close（）关闭 也需要像定时器一样，接收，清掉。

使用分析：

//如果只是简单的消息提示可以简写为： this.$message.[success(warning/error)].('消息内容')
//如果需要其他的参数 需要：
			this.$message({
        message:'消息内容'，
        type：'success/error/warnings', //设置类型；默认值：info
        showClose: true, //设置是否可以手动关闭(是否显示关闭按钮)
        center：true， //设置是否内容居中
        duration:3000, //默认值是3000ms 设置message停留时间，0表示不自动关闭，可以与close方法配合使用
        dangerouslyUseHTMLString: true,  //这个属性 如果设置了，message里边可以插入html代码片段；
        //如下（存在风险 可能导致xss攻击 永远不要将用户提交的内容赋值给 message 属性。）
        message: '<strong>这是 <i>HTML</i> 片段</strong>'
        customClass：'className'//指向一个自己定义的class类（修改默认message框样式） 
        //但是！！！样式style不能添加scoped，加了会失效，不加scoped可能会造成全局污染；
        iconClass：el-icon-setting,//（这里可以换消息框的图标，但是！！！会覆盖type）
        onClose:()=>{ 	//onClose是message消息框消失后要执行的回调
    　　		//此处写提示关闭后需要执行的函数
    		}，
        offset:20 //类型number不带单位 默认值20 message框 距离页面顶部的距离
      })