淺談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è)組件里面并沒(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)文章希望大家以后多多支持腳本之家!
- ElementUI的this.$notify.close()調(diào)用不起作用的解決
- Vue 解決在element中使用$notify在提示信息中換行問(wèn)題
- vue+elementUI組件遞歸實(shí)現(xiàn)可折疊動(dòng)態(tài)渲染多級(jí)側(cè)邊欄導(dǎo)航
- VUE2.0+ElementUI2.0表格el-table循環(huán)動(dòng)態(tài)列渲染的寫(xiě)法詳解
- Vue+ElementUI實(shí)現(xiàn)表單動(dòng)態(tài)渲染、可視化配置的方法
- ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
相關(guān)文章
VUE的history模式下除了index外其他路由404報(bào)錯(cuò)解決辦法
在本篇文章里小編給大家分享的是關(guān)于VUE的history模式下除了index外其他路由404報(bào)錯(cuò)解決辦法,對(duì)此有需要的朋友們可以學(xué)習(xí)下。2019-08-08vue3+three.js實(shí)現(xiàn)疫情可視化功能
這篇文章主要介紹了vue3+three.js實(shí)現(xiàn)疫情可視化,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-09-09Vue項(xiàng)目之學(xué)生管理系統(tǒng)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目之學(xué)生管理系統(tǒng)實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02