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; } } };