vue-color-picker-wheel

A Vue color picker component based on the Farbtastic jQuery Color Picker plug-in
34,843 26
Install
npm install vue-color-picker-wheel
Latest Version:0.4.3
Vue:2
License:MIT
Last Updated:Feb 13, 2019
Links: GitHub  ·  npm
Maintainer: nino-vrijman

Vue Color Picker Wheel

Demo

Basic

Basic CodePen demo

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

Changelog

Changelog on Github

License

MIT

Related Packages

vue-color-next

🎨 Vue Color Picker Component for Vue 3.x

1,220 5
vue-color-picker

A responsive color picker with Vue.js

3,059
vue-iro-color-picker

Vue color picker

1,764 9
abundant-color-picker

一个丰富的颜色选择器

505
vue-swatches

Help the user picking beautiful colors!

485,747 565

Version History

Version Released License
0.4.3 MIT
0.4.2 MIT
0.4.1 MIT
0.4.0 MIT
0.3.0 MIT