element ui 的Notification通知如何加 a 標籤和按鈕，並彈多個

前言：工做中須要在頁面右下角彈出不少個提醒框，提醒框上有一個可點擊的a標籤，並有一個按鈕，同時還須要一次性關閉全部的彈出框。轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9344642.htmljavascript

解決方案

　　因爲一次須要彈出多個彈出框，互不影響，因此我採用 element ui 的Notification 通知，可是又要加a標籤，又要加按鈕，因此採用了VNode。css

　　須要解決的問題，a標籤和按鈕如何添加點擊事件，解決方案以下圖所示：html

demo示例

　　預覽 demo：yuleGH notification.html 　　vue

　　網站地址：個人我的vue+element ui demo網站 java

　　github地址：yuleGH githubgit

<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

vue VNode如何使用，是什麼東西？github

轉載請註明出處：https://www.cnblogs.com/yuxiaole/p/9344642.htmlelement-ui