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