淺談element的$notify注意點
我的初衷是把element-ui的$notify通知封裝成一個組件，登錄成功后調(diào)用獲取低庫存接口，如果獲取接口的列表當中庫存大于0，則顯示這個通知，并且在文本當中提供點擊事件。
因此，首先想到的就是使用dangerouslyUseHTMLString屬性，可以插入html字符串
export default {
methods: {
open12() {
this.$notify({
title: 'HTML 片段',
dangerouslyUseHTMLString: true,
message: '<strong>這是 <i id="show">HTML</i> 片段</strong>'
});
}
}
}
但是，message里面的html字符串其實是脫離了vue，例如不能用@click方法綁定事件，因此，應該用js的操作dom來綁定。
首先，我想到的是在該組件的mounted方法里面獲取
document.querySelector('#show');
但是這樣獲取到的是null，為什么呢？
mounted的時候是該組件模板里面的dom掛載完畢，然而我這個組件里面并沒有模板，只在方法里使用了this.$notify，掛載完后這個notify并不在app里面，
role=“alert”就是該通知框，因此我們不能把它當做普通組件操作。而且，它的掛載時機有可能在該組件的mounted之后，就是mouted方法時只是該組件掛載了，但是里面的這個motify可能還沒有，因此就是null。
如果要在里面添加js方法如綁定事件，應該要在html里面添加監(jiān)聽，但是要掌握好時機。
我這里還是不使用notify了，因為notify應該是偏向于文本展示的通知類，我這里使用notify可能就會有點不妥。
到此這篇關(guān)于淺談element的$notify注意點的文章就介紹到這了,更多相關(guān)element $notify內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了Vue引入遠程JS文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
使用vue實現(xiàn)簡單鍵盤的示例(支持移動端和pc端)
這篇文章主要介紹了使用vue實現(xiàn)簡單鍵盤的示例(支持移動端和pc端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于Vue-Router的相關(guān)資料,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應用,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08
Vue實現(xiàn)左右菜單聯(lián)動實現(xiàn)代碼
這篇文章主要介紹了Vue實現(xiàn)左右菜單聯(lián)動實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue項目引進ElementUI組件的方法，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue之請求如何傳遞參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
keep-alive是vue中的內(nèi)置組件,能在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復渲染DOM,這篇文章主要介紹了Vue中Keep-Alive緩存組件使用語法及原理,需要的朋友可以參考下2024-07-07
簡單了解Vue computed屬性及watch區(qū)別
這篇文章主要介紹了通過實例解析Vue computed屬性及watch區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07