Vue.js カラーピッカー(color picker)の実装サンプル
環境
vue 2.6.14
Google Chrome 106.0.5249.119
書式
<input type="color" v-model="value" />
const app =new Vue({
el:セレクターID,
data: {
value:色の値
}
<input type="color" v-model="value" />
const app =new Vue({
el:セレクターID,
data: {
value:色の値
}
<input type="color" v-model="value" />
const app =new Vue({
el:セレクターID,
data: {
value:色の値
}
「type="color"」を指定して色ピッカーを選択します
色を選択するカラーピッカーを立ち上げます。
「value:色の値」でカラーピッカーの初期値を設定します。
使用例
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="cft">
<input type="color" v-model="value" />
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: '#87CEEB',
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="cft">
<input type="color" v-model="value" />
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: '#87CEEB',
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="cft">
<input type="color" v-model="value" />
</div>
<script>
const app = new Vue({
el: '#cft',
data: {
value: '#87CEEB',
},
});
</script>
</body>
</html>
結果
カラーピッカーの初期値に「’#87CEEB’」が表示されます。
色を選択するカラーピッカーを起動します。