Vue.js で ColorPicker (iro.js) を使う方法

タイトル通り。

iro.js という Color Picker をどうしても使いたかった、Vue.jsで。¹
しかし、Vue.js向けには作られていないのでちょっとだけ使い方を工夫する必要があった。
具体的な方法についてはGithub上でおこなわれた議論(?)の途中に出てきた template の書き方を参考にした。²

実行結果

以下画像。
この丸い、Color Pickerが良かった。（他のは四角いの多い）

インストール

$ npm install @jaames/iro

ソースコード

ColorPicker.vue

<template>
  <div :id="'iro-'+id"></div>
</template>

<script>
import iro from '@jaames/iro'

let colorPicker;
export default {
  name: 'color-picker',
  props: ['value', 'config'],
  data() {
    return {
      id: this._uid,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (!this.value || this.value.length > 7) {
        this.config.color = '#ffffff'
      } else if (this.value.length === 6) {
        this.config.color = '#' + this.value
      } else {
        this.config.color = this.value;
      }

      colorPicker = new iro.ColorPicker('#iro-' + this.id, this.config);
      colorPicker.on('color:change', this.emitColor)
    },
    updateConfig() {
      // TODO - watch for config changes and apply them
    },
    emitColor(color) {
      this.$emit('input', color.hexString);
    }
  },
  watch: {
    value: (to) => {
      if (colorPicker && colorPicker.color && to.length <= 7) {
        colorPicker.color.hexString = to;
      }
    },
    config: () => {
      this.updateConfig()
    }
  }
}
</script>

<style scoped>

</style>

1. デザイン的に、丸いのが可愛いからです。 ↩

2. https://github.com/jaames/iro.js/issues/30 の議論にでているソースコードを参考にした。参考先は　adrianjost/SmartLight-Firebase である。またライセンスが不明であるがため、参考にした点で何らかの問題があるかもしれないが、 MIT LICENSE である iro.js の Issue 上に特に料金体系等に関する記載なく掲載しているためMITと仮定して使用した。元のソースコードを監視(watch)し、ライセンスが適用されればそのライセンスに従う。また、ライセンスが無いことを指摘し作って欲しいというIssueを作成した。これ ↩