2017-12-8

[Vue.js] コンポーネントのバリエーションを指定する方法

以下のような HTML が存在する。

<div class="Btn"></div>

<div class="Btn -primary"></div>

<div class="Btn -secondary"></div>

<div class="Btn -disabled"></div>

これを

<btn-component></btn-component>

このようにbtn-componentとして Vue コンポーネントした場合、どのようにバリエーション（デフォなのか primary なのか secondary なのか）を指定するのかは色々方法はあると思うが、自分が良いと思った手法をメモとして残しておく。

結論

Demo

以下のような方法で指定する。

<btn-component>Default</btn-component>
<btn-component color="primary">Primary</btn-component>
<btn-component color="secondary">Secondary</btn-component>
<btn-component disabled>Disabled</btn-component>

<template>
  <div class="Btn" :class="rootClass">
    <slot></slot>
  </div>
</template>

<script>
var BtnComponent = {
  template: '#tpl-btn',
  props: {
    color: {
      type: String,
      default: null,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    rootClass: function() {
      var classObj = {
        '-disabled': this.disabled,
      };

      if (this.color) classObj[`-${this.color}`] = true;

      return classObj;
    },
  },
};
</script>

解説

colorに関してはわかりやすく、プロパティとして呼び出しの際に文字列を渡す事によってバリエーションを指定する。色指定のような一つの項目に対して複数のパターンがあるような物はこのように指定する。

disabledに関しては少し特殊で、呼び出しの際に

<btn-component disabled></btn-component>

のように、呼び出している。これは

<btn-component disabled="true"></btn-component>

と同じ意味で、disabledプロパティにtrueを渡している。

公式には記載が無かったが、プロパティの値を指定しなかった場合は true が渡される模様。

公式サイトには記載が無いものの、有名所の Vue フレームワークである vuetify がこの手法を使用しているので自分も同様に使うことにした。