10. スライダーで入力したカラーコードを動的に表示する
- Vue.jsバージョン: 2.5.2
- 3つのスライダーでHSLの値を変更すると、色と数値が動的に変更されます。
サンプル
var vm = new Vue({
el: "#app",
data: {
h: 163,
s: 84,
l: 77,
},
computed: {
c: function() {
return `hsl(${this.h}, ${this.s}%, ${this.l}%)`
},
},
});
以下はHTML部分の要点のみを抜粋したものです。
<input class="form-control" v-model="c" :style="{backgroundColor: c}" />
<input type="range" min="0" max="360" v-model.number="h" />
<input type="range" min="0" max="100" v-model.number="s" />
<input type="range" min="0" max="100" v-model.number="l" />
おまけ: サンプルコード07はコードポイントによってlengthの結果が正しくならないことがある
サンプルコード07のHTMLに以下のコードがありますが、文字によってlengthの結果が期待どおりにならないことがあります。
<div class='panel-footer'>あと {{140 - b.length}} 文字
</div>
'a'.length // => 1
'あ'.length // => 1
'正'.length // => 1
'𠮷'.length // => 2
上の例では「𠮷」（0x20BB7）で2が返ります。
これはVue.jsの問題ではなく、JavaScriptの問題です。alphanumericや簡単な漢字・ひらがな・カタカナ（コードポイントがUTF-16の16ビットに収まる場合）のうちはよいのですが、U+10000を超えるとlengthが1つのコードポイントを2とカウントします。
さしあたっての回避法として、BPSアプリチームのyoshiさんが見つけてくれた方法をご紹介します。詳しくは別記事にしたいと思います。
[...'𠮷'].length // => 1
このあたりの闇深い部分については以下が大変参考になります。
参考: JavaScript における文字コードと「文字数」の数え方
バックナンバー（Vue.jsサンプルコード）
- Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
- Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
- Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
- Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
- Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
- Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
- Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
- Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
- Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
- Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
- Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
- Vue.jsサンプルコード（15）パスワードのマスクを解除する
- Vue.jsサンプルコード（16）パスワードを入力中だけ表示する