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
转载请注明出处：https://www.cnblogs.com/yuxiaole/p/9344642.html
element ui 的Notification通知如何加 a 标签和按钮，并弹多个的更多相关文章
- 在vue中关于element UI 中表格实现下载功能，表头添加按钮，和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- Vue3 + Element ui 后台管理系统
Vue3 + Element ui 后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...
- vue+element ui项目总结点（一）select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- vue加scoped后无法修改样式（无法修改element UI 样式）
有的时候element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用 第一种方法 原因:scoped 解决方法:去掉scoped 注意:此时该样式会污染 ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- element ui 渲染超过上百条数据时页面卡顿，更流畅的加载大量数据
问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度
- Android Notification通知详细解释
Android Notification通知具体解释 Notification: (一).简单介绍: 显示在手机状态栏的通知. Notification所代表的是一种具有全局效果的通 ...
- notification 通知
1. 定义一个方法 -(void) update{ } 2. 对象注册,并关连消息 [[NSNotificationCenter defaultCenter]addObserver:self sele ...
- element ui Angular学习笔记（一）
1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入El ...
随机推荐
- word2vec的原理（一）
最近上了公司的新员工基础培训课,又对NLP重新产生的兴趣.NLP的第一步大家知道的就是不停的写正则,那个以前学的还可以就不看了.接着就是我们在把NLP的词料在传入神经网络之前的一个预处理,最经典的就是 ...
- C#6.0语言规范(十七) 特性
许多C#语言使程序员能够指定有关程序中定义的实体的声明性信息.例如,在一个类中的方法的可访问性由与装饰它指定method_modifier小号public,protected,internal,和pr ...
- linux的Yum软件包管理工具
Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器.基于RPM包管理,能够从指定的服务器自动下载 ...
- iOS开发之Todo List for Swift项目
一直从事Windows Phone开发,但对iOS开发一直有所好奇,于是在MBP到手之际,顺手安装了Xcode.移动互联网开发的相似性,使得我能快速地了解和认识了iOS的开发框架体系,在看完了Appl ...
- WebSocket集成XMPP网页即时通讯1：Java Web Project服务端/客户端Jetty9开发初探
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- 桶排序和计数排序的理解实现和比较(Java)
比较和非比较的区别 常见的快速排序.归并排序.堆排序.冒泡排序等属于比较排序.在排序的最终结果里,元素之间的次序依赖于它们之间的比较.每个数都必须和其他数进行比较,才能确定自己的位置.比较排序的优势是 ...
- windows2016 安装mysql5.7
下载msi安装包,一路下一步. 安装好后,做下简单配置. 默认的my.ini和datadir在C:\ProgramData\MySQL Server 5.7下 更改默认my.ini的方法为修改注册表 ...
- JDK中ThreadDump诊断Java代码中的线程死锁问题
多线程的死锁..死锁不是死了而是线程互相等待... 在项目中可能就是在几十万行的代码中存在一个死锁的问题,如何发现这个问题并且解决这个问题. JavaJDK为我们提供了一个诊断工具叫做ThreadDu ...
- web工程迁移---jboss5迁移到jboss6
这几天在做web工程的迁移,从jboss 5迁移到jboss 6.3. 在做迁移的过程中遇到了一些问题,在这里记录一下. 首先来看一下jboss5和jboss6.3的区别: 上面两幅 ...
- spring 资源访问
spring 资源访问 Resource resource=null; //访问网络资源 resource=new UrlResource("file:bool.xml"); // ...