淺談element的$notify註意點

Posted on by

我的初衷是把element-ui的$notify通知封裝成一個組件，登錄成功後調用獲取低庫存接口，如果獲取接口的列表當中庫存大於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裡面添加監聽，但是要掌握好時機。

我這裡還是不使用notify瞭，因為notify應該是偏向於文本展示的通知類，我這裡使用notify可能就會有點不妥。

到此這篇關於淺談element的$notify註意點的文章就介紹到這瞭,更多相關element $notify內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：