A collection of color picker components for Vue.js 2, inspired from Sketch, Photoshop, Chrome & more.
Install
installing via NPM
After downloading the package 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> |
Usage
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': material, 'compact-picker': compact, 'swatches-picker': swatches, 'slider-picker': slider, 'sketch-picker': sketch, 'chrome-picker': chrome, 'photoshop-picker': photoshop }, data () { return { 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 --> |
See live demo and download source code.
This awesome plugin is developed by xiaokaike. Visit their official github repository for more information and follow for future updates.