September 23, 2022

Javascript Simple Color Gradient Picker For Vue.js

Vue Color Gradient Picker is an easy gradient color picker component for Vue.js.

simple color picker javascript, javascript color gradient based on value, jquery gradient color picker, xn color picker, multiple color picker jquery

How to make use of it:

Install and download:

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

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

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

Vue Color Gradient Picker Plugin/Github


See Demo And Download

Official Website(arthay): Click Here

This superior jQuery/javascript plugin is developed by arthay. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.