• 演示网址
• 本地下载

vue-color

Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0).

Live demo

Installation

NPM

var Photoshop = require('vue-color/src/Photoshop.vue');
 
new Vue({
  components: {
    'Photoshop': Photoshop
  }
})

ES6

import { Photoshop } from 'vue-color'
 
new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

Browser globals

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>

Local setup

npm install
npm run dev

Usage

<!-- 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" />

OR

<chrome-picker :value="colors" @input="updateValue"></chrome-picker>

License

vue-color is licensed under The MIT License.