ElementUI 消息提示组件Message
目录
- 官方地址
- 应用场景
- 基本用法
- 通知类型
- 偏移量
- 使用HTML代码片段
- 开启关闭按钮
- 文字内容居中
- 自定义图标iconClass
- onClose
- close实例方法
- 全局引入
- 单独引用
- Options
- 方法
官方地址
https://element.eleme.io/#/zh-CN/component/notification
应用场景
常用于主动操作后的反馈提示
基本用法
$message()接受一个对象，message，设置通知的正文，接受一个String或者VNodeduration，控制关闭的间隔，接受Number，单位ms，默认3000- 特别的，设置为
0，表示不会自动关闭
- 特别的，设置为
<p>
<el-button :plain="true" @click="open">打开消息提示el-button>
<el-button plain @click="openVN">VNodeel-button>
p>
open() {
this.$message('这是一条消息提示')
},
openVN() {
const h = this.$createElement;
this.$message({
message: h('p', null, [
h('strong', null, '内容可以是'),
h('i', {
style: 'color: teal'}, 'VNode')
]),
})
},
通知类型
通知类型由type声明
successinfowarningerror
或者
$message.success$message.info$message.warning$message.error
<p>
<el-button :plain="true" @click="open19">成功el-button>
<el-button :plain="true" @click="open20">消息el-button>
<el-button :plain="true" @click="open21">警告el-button>
<el-button :plain="true" @click="open22">错误el-button>
p>
// 调用方式一，type
open19() {
this.$message({
message: '这是一条成功的消息',
type: 'success'
})
},
open20() {
this.$message({
message: '这是一条消息提示',
type: 'info'
})
},
// 调用方式二，this.$message.warning
open21() {
this.$message.warning({
message: '这是一条警告消息'
})
},
open22() {
this.$message.error({
message: '这是一条错误消息'
})
},
偏移量
偏移量offset,设置Message组件具体屏幕顶部的具体
注意在同一时刻，所有的 Message实例应当具有一个相同的偏移量。
<el-button
plain
@click="open23">
成功
el-button>
open23() {
this.$message.success({
message: '距离顶部200px',
offset: 200,
})
},
使用HTML代码片段
message 属性虽然支持传入 HTML 片段，
但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。
因此在dangerouslyUseHTMLString打开的情况下，
请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。
<p>
<el-button plain @click="open24">成功el-button>
p>
open24() {
this.$message({
message: '使用HTML代码片段',
dangerouslyUseHTMLString: true,
type: 'info'
})
},
开启关闭按钮
关闭按钮的显示与否由showClose指定
<el-button
type="primary"
native-type="button"
plain
@click="open25">
开启关闭按钮
el-button>
open25() {
this.$message({
message: '开启关闭按钮',
type: 'info',
showClose: true,
})
},
文字内容居中
文字内容居中由center指定
<p>
<el-button :plain="true" @click="open27">文字内容居中el-button>
p>
open27() {
this.$message({
message: '内容居中',
type: 'success',
center: true,
})
},
自定义图标iconClass
跟notification组件有点区别，message组件的iconClass会覆盖type，而且也不会继承它的情境色
<p>
<el-button :plain="true" @click="open26">自定义图标el-button>
p>
open14() {
this.$notify({
title: 'Success',
message: '这是一条成功的消息',
iconClass: 'el-icon-delete', // 如果设置了type，iconClass会覆盖它，并且继承它的情境色
type: 'success',
})
},
onClose
onClose，组件关闭时的回调函数
<p>
<el-button :plain="true" @click="open30">onClose指定关闭时的回调函数el-button>
p>
open30() {
this.$message.success({
message: 'onClose指定关闭时的回调函数',
duration: 3000,
onClose: ()=>console.log('关闭啦'),
})
},
close实例方法
调用 Message或 this.$message 会返回当前Message 的实例。如果需要手动关闭实例，可以调用它的close方法。
<p>
<el-button :plain="true" @click="open31">close实例方法el-button>
p>
open31() {
let closed = this.$message({
message: 'close实例方法',
duration: 0,
});
setTimeout(()=>closed.close(), 1000);
}
全局引入
ElementUI在Vue.prototype中注册了全局方法$message，所以在Vue实例中可以采用this.$message方式调用Message组件
单独引用
import {Message} from 'element-ui; 此时调用方法为Message(options)，也为每个type定义了各自的方法，如Message.success(options)，并且可以调用Message.closeAll()手动关闭所有实例
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 |
方法
调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。
| 方法名 | 说明 |
|---|---|
| close | 关闭当前的 Message |