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