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 は何だろう。グローバルな規定があるのかな。※ 要調査

所感

第二回目だが、一回目と比べてあまり成長がないな。。
次こそ頑張ろう。