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 相关文章推荐
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
jquery判断checkbox(复选框)是否被选中的代码
Oct 20 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
Oct 25 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 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
php 求质素(素数) 的实现代码
2011/04/12 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
javascript 函数使用说明
2010/04/07 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
详解python做UI界面的方法
2019/02/27 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
总经理任命书
2014/03/29 职场文书
八月迷情观后感
2015/06/11 职场文书
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers