vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
vue使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
使用element-ui中的Notification,只有一个message属性是有很大的操作空间,其余的都是写死的,无法进行扩展,达不到想要的效果。所以只能在message上下功夫。
在element-ui官方文档中可以看到Notification中的message属性是可以处理VNode的所以我们可以使用VNode来达到我们需要的效果。
如何关闭通知呢?
当创建通知的时候,会返回该通知的实例,通过该实例的close方法可以将通知关闭。
那么当有多个通知显示在屏幕上时,如何关闭特定弹窗的呢?
创建一个字典,字典的key是message的Id,value是显示该消息的通知的实例。从而可以关闭特定的通知。代码如下。
importmainTablefrom'./mixin/mainTable'; importsystemMenufrom'./template/system-menu'; importheaderRowfrom'./template/header'; exportdefault{ 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(); deletethis.notifications[message.messageId]; }, //关闭所有通知 closeAllNotification(){ let_this=this; for(letkeyin_this.notifications){ _this.notifications[key].close(); delete_this.notifications[key]; } }, //打开一个新的通知 openMessageTips(message){ let_this=this; this.closeAllNotification(); letnotify=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:'10px18px', margin:'10px12px0px2px', textAlign:'center', textDecoration:'none', display:'inline-block', webkitTransitionDuration:'0.4s', transitionDuration:'0.4s', cursor:'pointer', backgroundColor:'white', color:'black', border:'2pxsolid#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:'10px18px', margin:'10px2px0px12px', textAlign:'center', textDecoration:'none', display:'inline-block', webkitTransitionDuration:'0.4s', transitionDuration:'0.4s', cursor:'pointer', backgroundColor:'white', color:'black', border:'2pxsolid#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自定义按钮并实现关闭功能及如何处理多个通知,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!