Vue Color Picker Wheel

A Vue color picker component based on the Farbtastic jQuery Color Picker plug-in.

View Demo Download Source

Installation

npm install --save vue-color-picker-wheel

Usage

ES6 modules

<template>
  <div>
    <ColorPicker :width="300" :height="300" :disabled="false" startColor="#ff0000" @colorChange="onColorChange"></ColorPicker>
  </div>
</template>

<script>
import ColorPicker from 'vue-color-picker-wheel';

export default {
  name: 'app',
  components: {
    ColorPicker
  },
  methods: {
    onColorChange(color) {
      console.log('Color has changed to: ', color);
    }
  }
};
</script>

CommonJS

const ColorPicker = require('vue-color-picker-wheel');

In a script tag, this loads the component using the global Vue instance.

<script src="https://unpkg.com/vue-color-picker-wheel"></script>

Properties

Property Description Type Default Example
width The width of the color picker Number 300 :width="400"
height The height of the color picker Number 300 :height="400"
disabled Whether or not the color picker should be disabled Boolean false :disabled="false"
startColor The color that is selected when opening the colorpicker String (hex color code) none startColor="#ffffff"

Events

Event Description Event parameters
colorChange Is fired after the selected color has changed color: String (hex color code)

GitHub