Easy Color Gradient Picker For Vue.js

Description:

An easy color picker & Gradient Color Picker component for Vue.js.

Basic usage:

1. Import the color picker component.

import { ColorPicker } from ‘vue-color-gradient-picker’;

2. Create a normal color picker.

<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. Create a gradient color picker.

<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);
    }
  }
}

Preview:

Download Details:

Author: arthay

Live Demo: https://arthay.github.io/vue-color-gradient-picker/

Download Link: https://github.com/arthay/vue-color-gradient-picker/archive/master.zip

Official Website: https://github.com/arthay/vue-color-gradient-picker

Install & Download:

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

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

You Might Be Interested In: