element-ui之Message 详解

发布时间:2024-02-07 09:00

Message 消息提示 :

引入方式:
//全局注册:
Vue.prototype.$message=Message;
//使用:
this.$message(options)
//单独引入:
import {Message} from 'element-ui'
//使用:
Message(options)

常用参数:
参数说明类型可选值默认值
message消息文字string / VNode
type主题stringsuccess/warning/info/errorinfo
iconClass自定义图标的类名,会覆盖 typestring
dangerouslyUseHTMLString是否将 message 属性作为 HTML 片段处理booleanfalse
customClass自定义类名string
duration显示时间, 毫秒。设为 0 则不会自动关闭number3000
showClose是否显示关闭按钮booleanfalse
center文字是否居中booleanfalse
onClose关闭时的回调函数, 参数为被关闭的 message 实例function
offsetMessage 距离窗口顶部的偏移量number20
方法:
方法名说明调用
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框 距离页面顶部的距离
      })

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号