vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019-08-17 10:45
1846 查看
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自定义按钮并实现关闭功能及如何处理多个通知,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
您可能感兴趣的文章:
相关文章推荐
- Vue.js自定义下拉列表,如何实现在下拉列表区域外点击即可关闭下拉列表的功能
- VUE 使用 element-ui 的 el-autocomplete 组件实现输入框自动提示查询功能 超简单!!!
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- 使用织梦自带的邮件功能:实现自定义表单邮件通知
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(1)
- 使用本地通知UILocalNotification实现简易闹钟
- vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
- 使用element UI Cascader 级联选择器实现简单的选择生日日期的功能(没有年份)
- vue-cli + ElementUI 实现自定义接口上传图片
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- iOS开发 UILocalNotification 本地通知实现提醒功能
- vue中使用Element-UI----如何修改环形进度条尺寸
- 如何利用vue+vue-router+elementUI实现简易通讯录
- iOS开发 UILocalNotification 本地通知实现提醒功能
- 浅谈使用element ui + vuedraggable + sortablejs实现多种版式布局及托拽(2)
- Android种使用Notification实现通知管理以及自定义通知栏实例(示例四)
- 使用Jquery blockUI插件实现在点击按钮提交后阻止再次点击,当处理完后解除阻止
- vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能