vue-color 取色器的用法研究

github：https://github.com/xiaokaike/vue-color

今天项目中引用了一下vue-color,大概步骤如下

1、安装vue-color

$ npm install vue-color

2、安装所需依赖

npm install

3、引入项目

import { Photoshop } from 'vue-color'//有6中风格，用哪种直接引用对应的名字就行

new Vue({
  components: {
    'photoshop-picker': Photoshop
  }
})

 4、配置组件

components: {
     'sketch-picker': Sketch,
  },

5、data中引入colors

data() {
    return {
      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
},

6、使用组件

   

  <sketch-picker v-model="colors"></sketch-picker>