ElementUI 通知Notification组件系列
目录
- 官方地址
- 应用场景
- 基本用法
- 通知类型
- 自定义弹出位置
- 偏移量
- 使用HTML代码片段
- 隐藏关闭按钮
- 全局引入
- 单独引用
- 其他属性的测试
-
- iconClass
- onClose
- onClick
- close实例方法
- Options
官方地址
https://element.eleme.io/#/zh-CN/component/notification
应用场景
更多用于系统级别的通知的被动提醒
基本用法
$notify()接受一个对象，
title，设置通知的标题message，设置通知的正文duration，控制关闭的间隔，接受Number，单位ms，默认4500- 特别的，设置为
0，表示不会自动关闭
- 特别的，设置为
<p>
<el-button plain type="primary" native-type="button" @click="open1">自动关闭el-button>
p>
<p>
<el-button round type="danger" native-type="button" @click="open2">不会自动关闭el-button>
p>
open1() {
const h = this.$createElement;
this.$notify({
title: '自动关闭的标题',
message: h('strong', {style: 'color: teal'}, '这是一段自动关闭的标题内容')
})
},
open2() {
console.log(this);
this.$notify({
title: '不会自动关闭的标题',
message: '这一段普通的不会自动关闭的标题的内容',
duration: 0,
})
},
通知类型
通知类型由type声明
successinfowarningerror
或者
$notify.success$notify.info$notify.warning$notify.error
<el-button
plain
@click="open3">
成功
el-button>
<el-button
plain
@click="open4">
消息
el-button>
<el-button
plain
@click="open5">
警告
el-button>
<el-button
plain
@click="open6">
错误
el-button>
// 调用方式一
open3() {
this.$notify({
title: '成功',
message: '这是一条成功的消息',
type: 'success',
})
},
open4() {
this.$notify({
title: '消息',
message: '这一条消息的提示消息',
type: 'info',
})
},
// 调用方式二
open5() {
this.$notify.warning({
title: '警告',
message: '这是一条警告的提示消息',
})
},
open6() {
this.$notify.error({
title: '错误',
message: '这是一条错误的提示消息',
})
},
自定义弹出位置
弹出位置由position声明，可取的值：
top-lefttop-right默认bottom-leftbottom-right
<el-button
plain
@click="open7">
成功
el-button>
<el-button
plain
@click="open8">
消息
el-button>
<el-button
plain
@click="open9">
警告
el-button>
<el-button
plain
@click="open10">
错误
el-button>
open7() {
this.$notify.success({
title: '成功',
message: '这是一条成功的提示消息',
duration: 4500,
position: 'top-right',
})
},
open8() {
this.$notify.info({
title: '消息',
message: '这是一条消息的提示消息',
position: 'top-left',
})
},
open9() {
this.$notify.warning({
title: '警告',
message: '这是一条警告的提示消息',
position: 'bottom-right',
})
},
open10() {
this.$notify.error({
title: '错误',
message: '这是一条错误的提示消息',
position: 'bottom-left',
})
},
偏移量
偏移量offset,设置Notification组件具体屏幕顶部的具体
注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
<el-button
plain
@click="open11">
成功
el-button>
open11() {
this.$notify({
// 注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。
title: '成功',
message: '这是一条成功的提示消息',
duration: 4500,
position: 'top-right',
offset: 100, // 距离屏幕顶部的偏移量
})
},
使用HTML代码片段
message 属性虽然支持传入 HTML 片段，
但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。
因此在dangerouslyUseHTMLString打开的情况下，
请确保 message 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。
<el-button
type="danger"
native-type="button"
plain
@click="open12">
使用 HTML 片段
el-button>
open12() {
this.$notify({
title: 'HTML 片段',
dangerouslyUseHTMLString: true,
message: '这是 HTML 片段'
})
},
隐藏关闭按钮
关闭按钮的显示与否由showClose指定
<el-button
type="primary"
native-type="button"
plain
@click="open13">
隐藏关闭按钮
el-button>
open13() {
this.$notify({
title: 'Info',
message: '这是一条没有关闭按钮的消息',
type: 'info',
showClose: false,
})
},
全局引入
ElementUI在Vue.prototype中注册了全局方法$notify，所以在Vue实例中可以采用this.$notify方式调用Notification组件
单独引用
import {Notification} from 'element-ui; 此时调用方法为Notification(options)，也为每个type定义了各自的方法，如Notification.success(options)，并且可以调用Notification.closeAll()手动关闭所有实例
其他属性的测试
iconClass
iconClass覆盖type的图标，但继承它的情境色
<el-button
type="danger"
plain
@click="open14">
自定义图标
el-button>
open14() {
this.$notify({
title: 'Success',
message: '这是一条成功的消息',
iconClass: 'el-icon-delete', // 如果设置了type，iconClass会覆盖它，并且继承它的情境色
type: 'success',
})
},
onClose
onClose，手动关闭组件时的回调函数
<el-button
type="danger"
plain
@click="open15">
onClose
el-button>
open15() {
const h = this.$createElement
this.$notify({
title: 'Error',
message: h('strong', {style: 'color: teal'}, '这是一条错误的消息'),
iconClass: 'el-icon-delete',
type: 'error',
duration: 4500,
showClose: true,
onClose() {console.log('关闭啦', event)}, // 手动关闭时的回调函数
})
},
onClick
onClick，点击notification组件就会触发一次onClick回调函数
<el-button
type="danger"
plain
@click="open16">
el-button>
open16() {
const h = this.$createElement
this.$notify({
title: 'Error',
message: '这是一条错误的消息',
iconClass: 'el-icon-delete',
type: 'error',
duration: 4500,
showClose: true,
onClick() {console.log('点我啦', event)}, // 点击notification组件就会触发一次onClick
})
},
close实例方法
调用 Notification或 this.$notify 会返回当前Notification 的实例。如果需要手动关闭实例，可以调用它的close方法。
<el-button
type="success"
plain
@click="open17">
成功
el-button>
open17() {
let no = this.$notify({
title: 'success',
message: '这是一条成功的消息',
type: 'success',
});
setTimeout(()=>{no.close()}, 1000)
},
Options
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题 | string | — | — |
| message | 说明文字 | string/Vue.VNode | — | — |
| dangerouslyUseHTMLString | 是否将 message 属性作为 HTML 片段处理 | boolean | — | false |
| type | 主题样式，如果不在可选值内将被忽略 | string | success/warning/info/error | — |
| iconClass | 自定义图标的类名。若设置了 type，则 iconClass 会被覆盖 |
string | — | — |
| customClass | 自定义类名 | string | — | — |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | number | — | 4500 |
| position | 自定义弹出位置 | string | top-right/top-left/bottom-right/bottom-left | top-right |
| showClose | 是否显示关闭按钮 | boolean | — | true |
| onClose | 关闭时的回调函数 | function | — | — |
| onClick | 点击 Notification 时的回调函数 | function | — | — |
| offset | 偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量 | number | — | 0 |