Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js.
$ npm install vue-colorvar Photoshop = require('vue-color/src/Photoshop.vue');
new Vue({
components: {
'Photoshop': Photoshop
}
})import { Photoshop } from 'vue-color'
new Vue({
components: {
'photoshop-picker': Photoshop
}
})The dist folder contains vue-color.js and vue-color.min.js with all components exported in the window.VueColor object. These bundles are also available on NPM packages.
<script src="path/to/vue.js"></script>
<script src="path/to/vue-color.min.js"></script>
<script>
var Photoshop = VueColor.Photoshop
</script>npm install
npm run dev
var defaultProps = {
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
}
new Vue({
el: '#app',
components: {
'material-picker': material,
'compact-picker': compact,
'swatches-picker': swatches,
'slider-picker': slider,
'sketch-picker': sketch,
'chrome-picker': chrome,
'photoshop-picker': photoshop
},
data: {
colors: defaultProps
}
})<material-picker :colors.sync="colors"></material-picker>
<compact-picker :colors.sync="colors"></compact-picker>
<swatches-picker :colors.sync="colors"></swatches-picker>
<slider-picker :colors.sync="colors"></slider-picker>
<sketch-picker :colors.sync="colors"></sketch-picker>
<chrome-picker :colors.sync="colors"></chrome-picker>
<photoshop-picker :colors.sync="colors"></photoshop-picker>-[] support Vue 2.0
vue-color is licensed under The MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent