Use Color Pickers for Sketch, Photoshop, Chrome with Vue.js 2.0.
vue-color
In case you would like to import colors pickers in some Vue project, vue-color is a good solution. You can pick from 7 components:
- material,
- compact,
- swatches,
- slider,
- sketch,
- chrome,
- photoshop
Example
Install
npm install vue-color
App.vue
<template>
<div id="app">
<h1>Vue Color pickers</h1>
<p><em>via Vue.js Feed</em></p>
<photoshop v-model="colors" @change-color="onChange"></photoshop>
<chrome v-model="colors" @change-color="onChange"></chrome>
</div>
</template>
<script>
import { Photoshop, Chrome } from 'vue-color'
export default {
name: 'app',
components: {
Photoshop,
Chrome
},
data () {
return {
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
}
}
},
methods: {
// onChange method called when the event 'change-color' is emitted
onChange (val) {
this.colors = val
}
}
}
</script>
Check the repo on GitHub.