Element から学ぶ Vue.js の component の作り方 その2 (button)

Element から学ぶ Vue.js の component の作り方 その2 (button):

button

前提

Elemnt 2.52

公式ページ
https://element.eleme.io/#/en-US

ボタン

用意されている機能

• サイズの指定 3種
• タイプの指定によるデザインテーマの指定
• ボタンの形式(プレーン、角丸、円形)
• ローディングアクション
• 非活性
• アイコンの利用
• オートフォーカス
• ネイティブタイプ(button / submit / reset)

構成

<button 
    class="el-button" 
    @click="handleClick" 
    :disabled="buttonDisabled || loading" 
    :autofocus="autofocus" 
    :type="nativeType" 
    :class="[ 
      type ? 'el-button--' + type : '', 
      buttonSize ? 'el-button--' + buttonSize : '', 
      { 
        'is-disabled': buttonDisabled, 
        'is-loading': loading, 
        'is-plain': plain, 
        'is-round': round, 
        'is-circle': circle 
      } 
    ]" 
  > 

disable は buttonDisabled と loadng のいずれか。

buttonDisabled は下記の computed で定義。

親から渡した prop か、elForm を inject しているのでフォームの中においてるとフォームと連動する。

buttonDisabled() { 
  return this.disabled || (this.elForm || {}).disabled; 
} 

他は prop の値を素直に受け取っている。

<i class="el-icon-loading" v-if="loading"></i> 
<i :class="icon" v-if="icon && !loading"></i> 
<span v-if="$slots.default"><slot></slot></span> 

loading が true の場合は loading icon が表示される。

icon が指定されていて、loading 中でなければ icon が表示される。

slot の指定が可能になっている。

その他の computed

computed: { 
  _elFormItemSize() { 
    return (this.elFormItem || {}).elFormItemSize; 
  }, 
  buttonSize() { 
    return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size; 
  }, 

buttonSize は prop か _elFormItemSize の帰り値の inject している elForm か elFormItems のサイズ、

あと、this.$ELEMENT は何だろう。グローバルな規定があるのかな。※ 要調査

所感

第二回目だが、一回目と比べてあまり成長がないな。。

次こそ頑張ろう。