iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

Web Component 網頁元件之路系列 第 7

[Day07] - 新擬物風按鈕(五) - 參數改變 & 監聽變化

Day05 時 , 我們製作了一個可傳入參數的 neuomorphic-button

<neuomorphic-button icon="fas fa-wifi"></neuomorphic-button>

不知道有沒有 邦友 改變過那個 icon 的參數值 ?

  • font-awesome 圖示對照表
icon 名稱 對應圖示
fas fa-wifi
fas fa-phone

Gif 中我將 icon="fas fa-wifi" 改成 icon="fas fa-phone" , 不過按鈕裡面的圖示並沒有跟著改變 /images/emoticon/emoticon20.gif

這是怎麼一回事呢 ? 讓我們一同來深入探究吧 !


Web Component 的生命週期

Web Component 跟 React . Vue 相同有生命週期的存在 , 不過只有 5 個

生命週期的順序如下圖所示

生命週期 描述
constructor 建立元件時觸發
connectedCallback 元件 append 到畫面中觸發
disconnectedCallback 移除元件時觸發
adoptedCallback 移動元件時觸發 , 有 iframe 時才會用到
attributeChangedCallback 元件上屬性改變時觸發

根據上表 , 我們了解到在 icon 發生變化時 , 需要利用 attributeChangedCallback 來更改實際顯示的 icon

實作開始

one 註冊 attributeChangedCallback 事件

class NeuomorphicButton extends HTMLElement {

  constructor() {

    ...如昨天所示之內容
  }

  attributeChangedCallback(name, oldValue, newValue) {
  
      console.table({name, oldValue, newValue})
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

two 設定要監聽的屬性在 observedAttributes

class NeuomorphicButton extends HTMLElement {

  constructor() {

    ...如昨天所示之內容
  }

+  static get observedAttributes() {
+    return ['icon']
+  }

  attributeChangedCallback(name, oldValue, newValue) {
  
      console.table({name, oldValue, newValue})
  }
}

window.customElements.define('neuomorphic-button', NeuomorphicButton);

three 監聽到 icon 屬性改變時 , 將內部的 <i> 上的 class 也一同改變

attributeChangedCallback(name, oldValue, newValue) {

  const shadowRoot = this.shadowRoot;

  if (name === 'icon'){

    const i = shadowRoot.querySelector('i');
    i.className = newValue;
  }
  
}

之後圖示就會跟著我們的 icon 屬性一起變化 /images/emoticon/emoticon34.gif

如果想直接體驗成果 , 請到 web-component-attributeChangedCallback.html 查看

參考資料 :


上一篇
[Day06] - 新擬物風按鈕(四) - 事件處理
下一篇
[Day08] - 彈跳視窗 Modal - Slot 介紹
系列文
Web Component 網頁元件之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言