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

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

  1. 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  2. Vue3 + Element ui 后台管理系统

    Vue3 + Element ui  后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...

  3. vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  4. vue加scoped后无法修改样式（无法修改element UI 样式）

    有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...

  5. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  6. element ui 渲染超过上百条数据时页面卡顿，更流畅的加载大量数据

    问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度

  7. Android Notification通知详细解释

    Android Notification通知具体解释  Notification: (一).简单介绍:         显示在手机状态栏的通知. Notification所代表的是一种具有全局效果的通 ...

  8. notification 通知

    1. 定义一个方法 -(void) update{ } 2. 对象注册,并关连消息 [[NSNotificationCenter defaultCenter]addObserver:self sele ...

  9. element ui Angular学习笔记（一）

    1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...

随机推荐

  1. SpringMVC初探-HelloWorld

    MVC的概念 MVC是一种设计模式,即Model--View-Controller,模型--视图--控制器 Model(模型)表示应用程序核心(比如数据库记录列表). View(视图)显示数据(数据库 ...

  2. linux（乌班图）下执行pip没有问题，执行sudo pip报错的问题

    最近刚装好linux的虚拟机,在装一个套件时提示权限不足,于是添加上了 sudo 命令,结果直接报以下错误, Traceback (most recent call last): File " ...

  3. String.format(String format,Object... args)的用法

    String.format(String format, Object... args)方法详解 以前也看到过很多次这个用法,一直记不牢靠,今天整理一下.   我仅仅举几个例子稍做说明: String ...

  4. redis之事务

    一.是什么 可以一次执行多个命令,本质是一组命令集合.一个事务中的所有命令都会序列化,按顺序的串行化执行而不被其他命令插入,不许加塞.一个队列中,一次性.顺序性.排他性的执行一系列命令. 二.事务常用 ...

  5. Redis学习系列六ZSet(有序列表)及Redis数据结构的过期

    一.简介 ZSet可以说是Redis中最有趣的数据结构了,因为他兼具了Hash集合和Set的双重特性,也是用的最多的,保证了value值的唯一性的同时,,同时又保证了高性能,最主要的是还可以给每个Va ...

  6. Git for Windows之基础环境搭建与基础操作

    一.安装Git工具 下载地址:Git For Windows 下载完后,安装,全程Next. 二.全局配置 1.配置本地用户名,用于提交代码 2.配置邮箱 三.创建本地Git项目仓库 1.建立代码仓库 ...

  7. maven install 打包 报错 Cannot run program "gpg.exe": CreateProcess error

    打包报错, mvn install后加上参数-Dgpg.skip,例如:mvn install -Dgpg.skip   即可解决. 我们也可以去掉 这个 插件   <plugin>    ...

  8. VIM学习网址和资料收集

     摘要:这篇博客主要收集一些学习VIM的好网址和资料 娄老师的一篇VIM 原文地址:http://www.cnblogs.com/rocedu/p/6012444.html Github上VIM的学习 ...

  9. Haproxy 重定向跳转设置 - 运维小结

    前面已经详细介绍了Haproxy基础知识 , 今天这里再赘述下Haproxy的重定向跳转的设置.  haproxy利用acl来实现haproxy动静分离,然而在许多运维应用环境中,可能需要将访问的站点 ...

  10. Python模块: 命令行解析optionparser

    Python 有两个内建的模块用于处理命令行参数:一个是 getopt,<Deep in python>一书中也有提到,只能简单处理 命令行参数:另一个是 optparse,它功能强大,而 ...