Vue Color Picker Wheel
A Vue color picker component based on the Farbtastic jQuery Color Picker plug-in.
Demo
Basic
Installation
npm install --save vue-color-picker-wheel
Usage
ES6 modules
<template>
<div id="app">
<color-picker v-model="color"></color-picker>
<p>
Color:
<input v-model="color" type="text">
</p>
</div>
</template>
<script>
import ColorPicker from 'vue-color-picker-wheel';
export default {
name: 'App',
components: {
ColorPicker
},
created() {
},
data() {
return {
color: '#ffffff'
};
},
};
</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" |
| v-model | v-model to create two-way data binding for color | String (hex color code) | none | v-model="color" |
| startColor | The color that is selected when opening the colorpicker | String (hex color code) | none | startColor="#ffffff" |
Events
| Event | Description | Event parameters |
|---|---|---|
| color-change | Is fired after the selected color has changed | color: String (hex color code) |
Contributing
Checkout GitHub issues for any issues we need some help with.
# Serve with hot reload (default at localhost:8080)
vue serve --open src/color-picker.vue
# Build all variants
npm run build
7 Dec 3, 2022
2.4k Dec 29, 2022
11 Nov 24, 2022
159 Dec 26, 2022
69 Dec 28, 2022
0 Feb 8, 2021
3 Jul 13, 2018
83 Dec 28, 2022
141 Jan 2, 2023
42 Dec 14, 2022
15 Jun 21, 2022
2 Aug 29, 2018
10 Sep 6, 2021
27 Sep 30, 2022
13 Sep 20, 2022
2 Nov 15, 2020
0 Oct 29, 2022
3 May 20, 2021
106 Dec 28, 2022