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

時間 2019-11-07

標籤 element notification 通知如何標籤按鈕多個简体版

原文原文鏈接

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。