欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談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路徑的方法

    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ò)解決辦法

    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)疫情可視化功能

    這篇文章主要介紹了vue3+three.js實(shí)現(xiàn)疫情可視化,本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • vue2.0多條件搜索組件使用詳解

    vue2.0多條件搜索組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue2.0多條件搜索組件的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • Vue項(xiàng)目之學(xué)生管理系統(tǒng)實(shí)例詳解

    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

    本篇文章主要介紹了詳解如何在vue中使用sass,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法

    vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法

    這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2023-10-10
  • vue組件父子間通信詳解(三)

    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)題

    這篇文章主要介紹了element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-02-02
  • tdesign vue初始化組件源碼解析

    tdesign vue初始化組件源碼解析

    這篇文章主要為大家介紹了tdesign vue初始化組件源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-12-12

最新評(píng)論