发布时间:2024-02-07 09:00
//全局注册:
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框 距离页面顶部的距离
})