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