Color picker components for Vue.js 2

by

A collection of color picker components for Vue.js 2, inspired from Sketch, Photoshop, Chrome & more.
vueJs-color-picker

Install

installing via NPM

$ npm install vue-color

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.



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.

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by xiaokaike. Visit their official github repository for more information and follow for future updates.


Published by Rohit