[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" , 不过按钮里面的图示并没有跟着改变

这是怎麽一回事呢 ? 让我们一同来深入探究吧 !

Web Component 的生命周期

Web Component 跟 React . Vue 相同有生命周期的存在 , 不过只有 5 个

生命周期的顺序如下图所示

生命周期	描述
constructor	建立元件时触发
connectedCallback	元件 append 到画面中触发
disconnectedCallback	移除元件时触发
adoptedCallback	移动元件时触发 , 有 iframe 时才会用到
attributeChangedCallback	元件上属性改变时触发

根据上表 , 我们了解到在 icon 发生变化时 , 需要利用 attributeChangedCallback 来更改实际显示的 icon

实作开始

class NeuomorphicButton extends HTMLElement {

  constructor() {

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

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

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

设定要监听的属性在 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);

监听到 icon 属性改变时 , 将内部的 <i> 上的 class 也一同改变

attributeChangedCallback(name, oldValue, newValue) {

  const shadowRoot = this.shadowRoot;

  if (name === 'icon'){

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

之後图示就会跟着我们的 icon 属性一起变化