jtk

フォーム入力バインディングを理解する その6

f:id:jotaki:20190212100544p:plain

何年か前に jQuery で作った type tester という簡易的なフォント(関連のスタイリング)のテスターツールを Vue.js で作ってみる。 その6

GitHub Pages: https://yuheijotaki.github.io/type-tester/
GitHub リポジトリhttps://github.com/yuheijotaki/type-tester


<input type="color">バインディング

これも v-model=""バインディングが可能

input-color.vue(一部簡略化)

<template>
  <div>
    Color: <input
      type="color"
      v-model="color"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    >
    <input
      type="text"
      v-model="color"
      @input="updateValue"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
    >
  </div>
</template>

<script>
export default {
  name: 'inputColor',
  data() {
    return {
      color: '#000000'
    }
  },
  methods: {
    updateValue(e) {
      this.$emit('input', e.target.value)
      this.$emit('change', e.target.value)
    }
  }
}
</script>

すこし課題

<input type="color"><input type="text"> を双方向にバインディングする場合は #000 など短縮カラーコードではなく #000000 など6桁で入力されていないと color側が バインディング(同期)がされない。HTML側の仕様といえば仕様なのですが、

  • 短縮カラーコードが入力された場合は6桁に変換
  • カラーコード以外が入力された場合は、元のセットされていた値を復元

を余裕あったら実装したい

次やること

  • 和文テキストのデフォルト、欧文テキストのデフォルトをそれぞれ用意、自由入力欄も残して選択式でテキスト表示をする