[Day05] - 新拟物风按钮(三) - 参数设定

昨天我们利用 shadow-dom 将元件内外的样式区隔开来

不过 , 目前的 neuomorphic-button 有个奇怪之处

我们没有办法直接指定按钮要用哪一个 icon , 只能用 document.querySelector

var myTagName = 'neuomorphic-button';
document.querySelector(`${myTagName} .icon-box i`).className = 'fas fa-lightbulb'

使用 JS 事後对 dom 做修改 , 对於健忘的人 (比如说我) 就很容易忘记加上 JS 修改的那段 , 或是忘记自己有设定过替换的 JS

然後 , 在不同的 JS 档案中做修改 , Dedug 时就会很头痛 (所以这 icon 最後会变成啥样啊 !?)

今天 , 我们先来接收外部传入的参数 , 将 icon 相关的设定 , 统一放在 neuomorphic-button 元件上 (￣︶￣*))

设定属性

追加 icon 属性到 `neuomorphic-button` 元件上 , 更改小图示

book Step 1. 在 <neuomorphic-button /> 上加上属性 icon

<!-- 将我们要显示的图标放的 icon 属性的文字当中 -->
<neuomorphic-button icon="fas fa-lightbulb" />

book Step 2. 在元件上的 icon 接收下来 , 并将其写到 i 的 class 上面

Pink Tree 利用 this.getAttribute('icon') 取得元件上的 icon 属性

// neuomorphic-button.js
class NeuomorphicButton extends HTMLElement {

  constructor() {

    super();

    const iconName = this.getAttribute('icon')    
    

    ...照旧处理
  }
}

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

book Step 3. 并接收到的 iconName 写到 i 的 class 上面

// neuomorphic-button.js
class NeuomorphicButton extends HTMLElement {

  constructor() {

        super();
    
        const fontAwesomeStyle = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">`
    
        const styleStr = 'neuomorphic-button 的样式';

        // 取得原件上的 icon 属性
+        const iconName = this.getAttribute('icon')       

        const div = document.createElement('div')
        div.classList.add('icon-box')

        // 将取到的 iconName 设定给 i 
+        div.innerHTML = `<i class="${iconName}"></i>`
    
        const label = document.createElement('label')
        label.innerHTML = `<input type="checkbox">`
        label.append(div)
    
        const shadowRoot = this.attachShadow({mode: 'open'})
        shadowRoot.innerHTML = fontAwesomeStyle + styleStr
        shadowRoot.append(label)
  }
}

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

之後我们就可以到 font-awesome 官网查出我们想要的小图示 , 并修改 icon 属性