vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
关闭功能及如何处理多个通知
exprot default {
data() {
return {
//使用userNotifyId作为弹窗的key,用来获取弹窗的实例,以对对应弹窗进行操作
notifications: {}
}
},
methods: {
// 打开一个新的通知
openNotify(userNotification) {
// userNotification 中的userNotifyId是唯一的
const h = this.$createElement
let notify= this.$notify.success({
title: data.notification.notifyName,
dangerouslyUseHTMLString: true,
position: 'bottom-right',
message: h(
'p',
{
// 相当于`v-bind:style`
style: {
color: 'red',
fontSize: '14px'
},
class: 'pointer',
on: {
click: () => {
this.closeNotification(
data.notification.data.message,
data.userNotifyId,
)
}
}
},
data.notification.data.message
),
duration: 60 * 1000
})
this.notifications[data.userNotifyId] = notify
},
//关闭单个通知
closeNotification(message, id){
this.notifications[id].close();
delete this.notifications[id];
},
// 关闭所有通知
closeAllNotification(){
for (let key in this.notifications) {
this.notifications[key].close();
delete this.notifications[key];
}
}
}
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)