快捷導(dǎo)航

淺談element的$notify注意點(diǎn)

更新時(shí)間：2021年08月11日 15:17:21 作者：chiuwingyan

本文主要介紹了element的$notify注意點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我的初衷是把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è)組件里面并沒(méi)有模板，只在方法里使用了this.$notify，掛載完后這個(gè)notify并不在app里面，

role=“alert”就是該通知框，因此我們不能把它當(dāng)做普通組件操作。而且，它的掛載時(shí)機(jī)有可能在該組件的mounted之后，就是mouted方法時(shí)只是該組件掛載了，但是里面的這個(gè)motify可能還沒(méi)有，因此就是null。

如果要在里面添加js方法如綁定事件，應(yīng)該要在html里面添加監(jiān)聽(tīng)，但是要掌握好時(shí)機(jī)。

我這里還是不使用notify了，因?yàn)閚otify應(yīng)該是偏向于文本展示的通知類(lèi)，我這里使用notify可能就會(huì)有點(diǎn)不妥。

到此這篇關(guān)于淺談element的$notify注意點(diǎn)的文章就介紹到這了,更多相關(guān)element $notify內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue webpack重寫(xiě)cookie路徑的方法
webpack提供的反向代理服務(wù)器在開(kāi)發(fā)階段非常方便，幾行簡(jiǎn)單的代碼配置就可以使用反向代理功能，包括路徑重寫(xiě)、cookie處理等。這篇文章主要介紹了vue webpack重寫(xiě)cookie路徑,需要的朋友可以參考下
2019-07-07
VUE的history模式下除了index外其他路由404報(bào)錯(cuò)解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報(bào)錯(cuò)解決辦法，對(duì)此有需要的朋友們可以學(xué)習(xí)下。
2019-08-08
vue3+three.js實(shí)現(xiàn)疫情可視化功能
這篇文章主要介紹了vue3+three.js實(shí)現(xiàn)疫情可視化,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
vue2.0多條件搜索組件使用詳解
這篇文章主要為大家詳細(xì)介紹了vue2.0多條件搜索組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue項(xiàng)目之學(xué)生管理系統(tǒng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目之學(xué)生管理系統(tǒng)實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
詳解如何在vue中使用sass
本篇文章主要介紹了詳解如何在vue中使用sass，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-06-06
vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-10-10
vue組件父子間通信詳解（三）
這篇文章主要為大家詳細(xì)介紹了vue組件父子間通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
tdesign vue初始化組件源碼解析
這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12