vue using element-ui custom button in the Notification and closing function and how to achieve a plurality of notifications

Use element-ui in the Notification, only one message attribute is a lot of room, the rest are hard-coded and can not be extended to achieve the effect you want. It can only work hard in the message.

In the element-ui official document can be seen in the Notification message property can be dealt with so that we can use VNode VNode to achieve the effect we need.

How to turn off notice it?

When creating notifications, returns an instance of the notice by the close method of this example may notify closed.

So when there are multiple notifications appear on the screen, how to turn off specific pop it?

Create a dictionary whose key is the message of Id, value is an example of the notification message is displayed. So you can turn off a specific notice. code show as below.

mainTable from Import './mixin/mainTable' ; 
Import systemMenu from './template/system-menu' ; 
Import headerRow from './template/header' ; 

Export default { 
    name: 'XXXXX' , 
    Data () { 
        return {
             // use messageId as popups key, to obtain an instance of the pop, to operate on the corresponding pop 
            Notifications: {} 
        }; 
    }, 
    Mounted () { 
        the this $ messageWebsocket.websocketApi.initWebSocket (. the this $ Store. .state.login.userInfo.userInfo.id, the this .openMessageTips); 
    }, 
    Methods: {
        // Close single notification 
        closeNotification (ID, operateCode, Message) {
             the this .notifications [message.messageId] .close ();
             Delete  the this .notifications [message.messageId]; 
        }, 
        
        // close all notifications 
        closeAllNotification () { 
            the let _this = the this ;
             for (the let Key in _this.notifications) { 
                _this.notifications [Key] .close (); 
                Delete _this.notifications [Key]; 
            } 
        }, 
        
        // open a new notification 
        openMessageTips (Message) { 
            the 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' ; 
                                            }, 
                                            // the mouse into callback 
                                            mouseOver: function (E) { 
                                                e.target.style.backgroundColor = '# e7e7e7' 
                                            }, 
                                            the Click: _this.closeNotification.bind (_this , . 1, 2 , Message) 
                                        } 
                                    },
                                     "reminded later (after five minutes)"  
                                )
                            ]
                        ) 
                    ] 
                ), 
                DURATION: 0 , 
            }); 
            // the notification and examples messageId dictionary into 
            the this .notifications [message.messageId] = Notify; 
        } 
    } 
};