Vue.js的简单颜色选择器和渐变颜色选择器组件。

安装和下载：

# Yarn
$ yarn add vue-color-gradient-picker

# NPM
$ npm i vue-color-gradient-picker --save

基本用法：

1.导入颜色选择器组件。

从’vue-color-gradient-picker’导入{ColorPicker};

2.创建一个普通的颜色选择器。

<template>
  <div id="app">
    <ColorPicker
      :color="color"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />
  </div>
</template>

export default {
  name: 'App',
  components: {
    ColorPicker
  },
  data()  {
    return {
      color: {
        red: 255,
        green: 0,
        blue: 0,
        alpha: 1
      }
    }
  },   
  methods: {
    onChange(attrs, name) {
      this.color = { ...attrs };
    }
  }
}

3.创建一个渐变颜色选择器。

<template>
  <div id="app">
    <ColorPicker
      :gradient="gradient"
      :isGradient="true"
      :onStartChange="color => onChange(color, 'start')"
      :onChange="color => onChange(color, 'change')"
      :onEndChange="color => onChange(color, 'end')"
    />
  </div>
</template>

export default {
  name: 'App',
  components: {
    ColorPicker
  },
  data()  {
    return {
      gradient: {
        type: 'linear',
        degree: 0,
        points: [
          {
            left: 0,
            red: 0,
            green: 0,
            blue: 0,
            alpha: 1
          },
          {
            left: 100,
            red: 255,
            green: 0,
            blue: 0,
            alpha: 1
          }
        ]      
      }
    }
  },   
  methods: {
    onChange(attrs, name) {
      console.log(name);
    }
  }
}