Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).
var 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
<!-- suppose you have the data 'colors' in your component --> <material-picker v-model="colors" /> <compact-picker v-model="colors" /> <swatches-picker v-model="colors" /> <slider-picker v-model="colors" /> <sketch-picker v-model="colors" /> <chrome-picker v-model="colors" /> <photoshop-picker v-model="colors" />
colors accepts either a string of a hex color '#333' or a object of rgb or hsl values
{ r: 51, g: 51, b: 51 } or { h: 0, s: 0, l: .10 }, whatever tinycolor2
accepts as an input.
<!-- suppose you have the data 'colors' in your component -->
<material-picker v-model="colors" />
<compact-picker v-model="colors" />
<swatches-picker v-model="colors" />
<slider-picker v-model="colors" />
<sketch-picker v-model="colors" />
<chrome-picker v-model="colors" />
<photoshop-picker v-model="colors" /><chrome-picker :value="colors" @input="updateValue"></chrome-picker>
vue-color is licensed under The MIT License.
