VUE通知に要素-UIのカスタムボタンを使用して機能を閉じて、どのように通知を複数を達成するために

通知の要素-UIを使用、1つのメッセージのみ属性は部屋がたくさんあり、残りはハードコーディングされており、あなたが望む効果を達成するために拡張することができません。それが唯一のメッセージに懸命に働くことができます。

要素-UI公式文書は、通知メッセージのプロパティで見ることができて、我々は我々が必要とする効果を達成するためにVNODE VNODEを使用できるように対処することができます。

どのようにそれに気づくオフにするには？

通知を作成するときに、閉鎖通知することができる。この例のcloseメソッドによって通知のインスタンスを返します。

だから、複数の通知があったときに、特定のポップにそれをオフにする方法を、画面に表示されますか？

その鍵IDのメッセージである辞書を作成し、値が表示される通知メッセージの例です。だから、特定の通知をオフにすることができます。コードは以下の通りです。

インポート'./mixin/mainTable'からmainTable ; 
からインポートsystemMenu './template/system-menu' ; 
からインポートheaderRow './template/header' ; 

エクスポートデフォルト{ 
    名： 'XXXXX' 、
    データ（）{ 
        リターン{
             // 対応するポップで動作するように、ポップのインスタンスを取得するために、キーポップアップとしてのmessageIdを使用する
            通知：{} 
        }; 
    }、 
    （マウント）{ 
        この $のmessageWebsocket.websocketApi.initWebSocket（。この $ストア。 .state.login.userInfo.userInfo.id、この.openMessageTips）; 
    }、
    メソッド：{
        // 閉じる単一通知
        closeNotification（ID、operateCode、メッセージ）{
             これは[message.messageId] .close（）.notifications;
             削除 本.notifications [message.messageId]; 
        } 
        
        // すべての通知近い
        closeAllNotification（）{ 
            LETの_this = この;
             のため（LETキーで_this.notifications）{ 
                _this.notifications [キー] .close（）; 
                削除[キー] _this.notificationsを; 
            } 
        } 
        
        // 新たな通知開く
        openMessageTips（メッセージ）{ 
            LETの_thisを= この;
            この.closeAllNotification（）; 
            通知ましょう = この。$通知（{ 
                タイトル： '三高协诊消息' 、
                位置： '右下' 、
                showClose：偽、
                dangerouslyUseHTMLString：真、
                メッセージ：この。$のcreateElement（ 'DIV'、nullで、
                    [ 
                        この。$のcreateElement（ 'DIV'、nullで、[ この。$のcreateElement（ 'スパン'、ヌル、message.content）]）、
                         この $のcreateElement（ 'DIV'、。ヌル、
                            [ 
                                この$のcreateElement（
                                     'ボタン' 、
                                    { 
                                        スタイル：{ 
                                            パディング： '10pxの18px' 、
                                            マージン： '10pxの12ピクセル0PX 2ピクセル' 、
                                            textAlign ： 'センター' 、
                                            textDecoration： 'なし' 、
                                            表示： 'インラインブロック' 、
                                            webkitTransitionDuration： '0.4秒' 、
                                            transitionDuration： '0.4秒' 、
                                            カーソル： 'ポインタ' 、
                                            のbackgroundColor： '白' 、
                                            色： '黒' 、
                                            ボーダー： '2ピクセル固体＃1 e7e7e7' 、 
                                        } 、
                                        上：{ 
                                            マウスアウト：機能（E）{ 
                                                e.target.style.backgroundColor = '白' 。
                                            }、
                                            マウスオーバー：関数（E）{ 
                                                e.target.style.backgroundColor = '＃1 e7e7e7' 
                                            }、
                                            クリック：_this.closeNotification.bind（_this、 1、1 、メッセージ）
                                        } 
                                    }、
                                     "查看" 
                                ）、
                                この $のcreateElement（
                                     'ボタン' 、
                                    { 
                                        スタイル：{ 
                                            パディング： '10pxの18px' 、
                                            マージン： '10pxの2ピクセル0PX 12ピクセル' 、
                                            textAlign： 'センター' 、
                                            textDecoration： 'なし' 、
                                            ディスプレイ： 'インラインブロック' 、
                                            webkitTransitionDuration：「0.4秒」、
                                            transitionDuration： '0.4秒' 、
                                            カーソル： 'ポインタ' 、
                                            のbackgroundColor： '白' 、
                                            色： '黒' 、
                                            ボーダー： '2ピクセル固体＃1 e7e7e7' 、
                                        }、
                                        に関する：{ 
                                            // 鼠标移出的回调 
                                            マウスアウト：関数（E）{
                                                e.target.style.backgroundColor = 'ホワイト' ; 
                                            } 
                                            // コールバックへのマウス 
                                            のmouseOver：機能（E）{ 
                                                e.target.style.backgroundColor = '＃1 e7e7e7' 
                                            }、
                                            クリック：_this.closeNotification.bind（_this 、 1、2 、メッセージ）
                                        } 
                                    }、
                                     "5分後（後思い出さ）"  
                                ）
                            ] 
                        ）
                    ] 
                ）、
                DURATION： 0 、
            }）; 
            // 通知および実施例は、辞書をMESSAGEID 
            この [message.messageId] = .notifications 通知します; 
        } 
    } 
}。