typescript
1<template> 2 <div id="colorPicker" class="colorPicker"> 3 4 <chrome-picker v-model="defaultProps"/> 5 6 <div class="box" v-bind:style="{ background : defaultProps.hex , opacity : defaultProps.a}"></div> 7 8 </div> 9</template> 10 11<script lang="ts"> 12import { Component, Prop, Vue } from "vue-property-decorator"; 13 14import { Chrome } from 'vue-color' 15 16@Component({ 17 components: { 18 'chrome-picker' : Chrome 19 } 20}) 21export default class ColorPicker extends Vue { 22 23 private defaultProps = { 24 hex: '#ffffff', 25 hsl: { 26 h: 0, 27 s: 0, 28 l: 0, 29 a: 1 30 }, 31 hsv: { 32 h: 0, 33 s: 0, 34 v: 0, 35 a: 1 36 }, 37 rgba: { 38 r: 0, 39 g: 0, 40 b: 0, 41 a: 1 42 }, 43 a: 1 44 } 45 46 47 48 49 50} 51</script> 52 53<style lang="scss"> 54.colorPicker { 55 .box{ 56 margin: 32px; 57 width : 100px; 58 height : 100px; 59 border: solid 1px #4a4a4a 60 } 61 62} 63</style>
https://www.npmjs.com/package/vue-color
こちらのvue-colorを使って上記コードを書いてみました。
v-bind:style="{ background : defaultProps.hex , opacity : defaultProps.a}"
の部分をまとめられないかと思い、
typescript
1<template> 2 <div id="colorPicker" class="colorPicker"> 3 4 <chrome-picker v-model="defaultProps"/> 5 6 <div class="box" v-bind:style="style"></div> 7 8 </div> 9</template> 10 11<script lang="ts"> 12import { Component, Prop, Vue } from "vue-property-decorator"; 13 14import { Chrome } from 'vue-color' 15 16@Component({ 17 components: { 18 'chrome-picker' : Chrome 19 } 20}) 21export default class ColorPicker extends Vue { 22 23 private defaultProps = { 24 hex: '#ffffff', 25 hsl: { 26 h: 0, 27 s: 0, 28 l: 0, 29 a: 1 30 }, 31 hsv: { 32 h: 0, 33 s: 0, 34 v: 0, 35 a: 1 36 }, 37 rgba: { 38 r: 0, 39 g: 0, 40 b: 0, 41 a: 1 42 }, 43 a: 1 44 } 45 46 47 //↓追加 48 private style = { 49 background : this.defaultProps.hex, 50 opacity : this.defaultProps.a 51 } 52 53 54 55} 56</script> 57 58<style lang="scss"> 59.colorPicker { 60 .box{ 61 margin: 32px; 62 width : 100px; 63 height : 100px; 64 border: solid 1px #4a4a4a 65 } 66 67} 68</style>
このようにしてみたのですが、動きませんでした。
スタイルバインドをまとめる方法はるあるのでしょうか。
https://v1-jp.vuejs.org/guide/class-and-style.html
公式のドキュメントをみる限り、二個目の方法でできるはずなんですが...
環境のせいでしょうか
vue-cli3.0でやってます...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。