前言：工作中需要在頁面右下角彈出很多個提醒框，提醒框上有一個可點擊的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