console
var Photoshop = VueColor.Photoshop
var colors = {
hex: '#194d33',
hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
rgba: { r: 25, g: 77, b: 51, a: 1 },
a: 1
}
// // or
// var colors = '#194d33'
// // or
// var colors = { h: 150, s: 0.66, v: 0.30 }
// // or
// var colors = { r: 255, g: 0, b: 0 }
// // etc...
new Vue({
el: '#app',
components: {
'material-picker': VueColor.Material,
'compact-picker': VueColor.Compact,
'swatches-picker': VueColor.Swatches,
'slider-picker': VueColor.Slider,
'sketch-picker': VueColor.Sketch,
'chrome-picker': VueColor.Chrome,
'photoshop-picker': VueColor.Photoshop
},
data () {
return {
colors
}
},
watch: {
colors(value) {
console.log(JSON.stringify(value.rgba));
}
}
})
<div id="app">
<sketch-picker v-model="colors" />
</div>
input {
display: none;
}
label {
background: rgba(0, 0, 0, 0);
}
label::before {
content: "\f005";
font-family: FontAwesome;
margin-right: 5px;
display: inline-block;
color: rgba(0, 0, 0, 0.2);
}
label:hover {
color: rgb(245, 50, 50);
background: rgba(0, 0, 0, 1);
}
label:hover::before {
color: rgb(245, 50, 50);
}