vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知


Posted in Javascript onAugust 17, 2019

vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知

使用element-ui中的Notification,只有一个message属性是有很大的操作空间,其余的都是写死的,无法进行扩展,达不到想要的效果。所以只能在message上下功夫。

在element-ui官方文档中可以看到Notification中的message属性是可以处理VNode的所以我们可以使用VNode来达到我们需要的效果。

如何关闭通知呢?

当创建通知的时候,会返回该通知的实例,通过该实例的close方法可以将通知关闭。

那么当有多个通知显示在屏幕上时,如何关闭特定弹窗的呢?

创建一个字典,字典的key是message的Id,value是显示该消息的通知的实例。从而可以关闭特定的通知。代码如下。

import mainTable from './mixin/mainTable';
import systemMenu from './template/system-menu';
import headerRow from './template/header';
export default {
  name: 'xxxxx',
  data() {
    return {
      //使用messageId作为弹窗的key,用来获取弹窗的实例,以对对应弹窗进行操作
      notifications: {}
    };
  },
  mounted() {
    this.$messageWebsocket.websocketApi.initWebSocket(this.$store.state.login.userInfo.userInfo.id, this.openMessageTips);
  },
  methods: {
    //关闭单个通知
    closeNotification(id, operateCode, message){
      this.notifications[message.messageId].close();
      delete this.notifications[message.messageId];
    },
    //关闭所有通知
    closeAllNotification(){
      let _this = this;
      for (let key in _this.notifications) {
        _this.notifications[key].close();
        delete _this.notifications[key];
      }
    },
    //打开一个新的通知
    openMessageTips(message){
      let _this = this;
      this.closeAllNotification();
      let notify = this.$notify({
        title: '三高协诊消息',
        position: 'bottom-right',
        showClose: false,
        dangerouslyUseHTMLString: true,
        message: this.$createElement('div', null,
          [
            this.$createElement('div', null, [this.$createElement('span', null, message.content)]),
            this.$createElement('div', null,
              [
                this.$createElement(
                  'button',
                  {
                    style: {
                      padding: '10px 18px',
                      margin: '10px 12px 0px 2px',
                      textAlign: 'center',
                      textDecoration: 'none',
                      display: 'inline-block',
                      webkitTransitionDuration: '0.4s',
                      transitionDuration: '0.4s',
                      cursor: 'pointer',
                      backgroundColor: 'white',
                      color: 'black',
                      border: '2px solid #e7e7e7',
                    },
                    on: {
                      mouseout: function(e){
                        e.target.style.backgroundColor = 'white';
                      },
                      mouseover: function(e){
                        e.target.style.backgroundColor = '#e7e7e7'
                      },
                      click: _this.closeNotification.bind(_this, 1, 1, message)
                    }
                  },
                  "查看"
                ),
                this.$createElement(
                  'button',
                  {
                    style: {
                      padding: '10px 18px',
                      margin: '10px 2px 0px 12px',
                      textAlign: 'center',
                      textDecoration: 'none',
                      display: 'inline-block',
                      webkitTransitionDuration: '0.4s',
                      transitionDuration: '0.4s',
                      cursor: 'pointer',
                      backgroundColor: 'white',
                      color: 'black',
                      border: '2px solid #e7e7e7',
                    },
                    on: {
                      //鼠标移出的回调
                      mouseout: function(e){
                        e.target.style.backgroundColor = 'white';
                      },
                      //鼠标移入的回调
                      mouseover: function(e){
                        e.target.style.backgroundColor = '#e7e7e7'
                      },
                      click: _this.closeNotification.bind(_this, 1, 2, message)
                    }
                  },
                  "稍后提醒(五分钟后)"
                )
              ]
            )
          ]
        ),
        duration: 0,
      });
      //将messageId和通知实例放入字典中
      this.notifications[message.messageId] = notify;
    }
  }
};

总结

以上所述是小编给大家介绍的vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
javascript &&和||运算法的另类使用技巧
Nov 28 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
JS随机数产生代码分享
Feb 24 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
vue动态配置模板 'component is'代码
Jul 04 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 #Javascript
微信小程序移动拖拽视图-movable-view实例详解
Aug 17 #Javascript
微信小程序框架的页面布局代码
Aug 17 #Javascript
vue实现滑动到底部加载更多效果
Oct 27 #Javascript
vue实现页面滚动到底部刷新
Aug 16 #Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 #Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 #Javascript
You might like
.htaccess文件保护实例讲解
2011/02/06 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
培养自己的php编码规范
2015/09/28 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
简单谈谈Python中的闭包
2016/11/30 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
Python面向对象实现方法总结
2020/08/12 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
九年级英语教学反思
2014/01/31 职场文书
党员自我剖析材料
2014/08/31 职场文书
2015年度女工工作总结
2015/10/22 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
java解析XML详解
2021/07/09 Java/Android
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL