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.