zoukankan html css js c++ java

element ui 的Notification通知如何加 a 标签和按钮，并弹多个

前言：工作中需要在页面右下角弹出很多个提醒框，提醒框上有一个可点击的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

vue VNode如何使用，是什么东西？

转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9344642.html

查看全文

相关阅读:
Cannot find module 'webpack'
Failed to read auto-increment value from storage engine
laravel框架查看执行过的sql语句
 windows与虚拟机共享文件夹设置
 csv导出文件中有html
特定中文字符串正则匹配
 运动跟踪等算法的解释
 自控力这本书的读后感
 提取肤色信息原理及操作——opencv
那些年我们排过的序之希尔排序

原文地址：https://www.cnblogs.com/yuxiaole/p/9344642.html