前言：工作中需要在页面右下角弹出很多个提醒框，提醒框上有一个可点击的a标签，并有一个按钮，同时还需要一次性关闭所有的弹出框。转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9344642.html
解决方案
由于一次需要弹出多个弹出框，互不影响，所以我采用 element ui 的Notification 通知，但是又要加a标签，又要加按钮，所以采用了VNode。
需要解决的问题，a标签和按钮如何添加点击事件，解决方案如下图所示：
demo示例
预览 demo：yuleGH notification.html
网站地址：我的个人vue+element ui demo网站
github地址：yuleGH github
<html> <head>
<title>Notification 通知</title>
<!-- 引入样式 -->
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<link rel="stylesheet" href="../../lib/elementui/theme-chalk/index.css" type="text/css">
</head>
<body>
<div id="app">
<!--https://htmlpreview.github.io/?https://github.com/yuleGH/hello-world/blob/master/elementNotify.html-->
每个弹出框都是独立的，可多次弹出，并且可以自定义html
<br/>
<el-button
plain
@click="open">
可自动关闭
</el-button>
<el-button
plain
@click="open2">
不会自动关闭
</el-button>
<el-button
plain
@click="closeAll">
关闭所有的弹出框
</el-button>
</div>
<!-- 引入组件库 -->
<script type="text/javascript" src="../../lib/vue.js"></script>
<script type="text/javascript" src="../../lib/elementui/index.js"></script> <script type="text/javascript"> new Vue({
el: "#app",
data: {
dialogArr : []
},
methods: {
clickA(){
console.log(this);
alert("处理点击标签");
},
clickBtn(){
alert("处理点击按钮");
},
closeAll(){
for(var i = 0; i < this.dialogArr.length; i++){
this.dialogArr[i].close();
}
},
open() {
this.dialogArr.push(this.$notify.info({
title: '提示',
message: '这是一条会自动关闭的消息'
}));
},
open2() {
const h = this.$createElement;
this.dialogArr.push(this.$notify({
title: '标题名称',
message: h('p', null, [
h('span', null, '内容可以是 '),
h('a', {
on:{
click:this.clickA
}
}, "可点击的标签"),
h('button', {
on:{
click:this.clickBtn
}
}, "按钮")
]),
position: 'bottom-right',
duration: 0
}));
}
}
});
</script> </body> </html>
VNode
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9344642.html