欧美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è)組件里面并沒有模板，只在方法里使用了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 webpack重寫cookie路徑的方法

    vue webpack重寫cookie路徑的方法

    webpack提供的反向代理服務(wù)器在開發(fā)階段非常方便，幾行簡(jiǎn)單的代碼配置就可以使用反向代理功能，包括路徑重寫、cookie處理等。這篇文章主要介紹了vue webpack重寫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，小編覺得挺不錯(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)論