vcp

vue-color-picker-wheel

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

Showing:

Popularity

Downloads/wk

873

GitHub Stars

22

Maintenance

Last Commit

3yrs ago

Contributors

3

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Readme

Vue Color Picker Wheel

Example

Version Downloads License

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

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

PropertyDescriptionTypeDefaultExample
widthThe width of the color pickerNumber300:width="400"
heightThe height of the color pickerNumber300:height="400"
disabledWhether or not the color picker should be disabledBooleanfalse:disabled="false"
v-modelv-model to create two-way data binding for colorString (hex color code)nonev-model="color"
startColorThe color that is selected when opening the colorpickerString (hex color code)nonestartColor="#ffffff"

Events

EventDescriptionEvent parameters
color-changeIs fired after the selected color has changedcolor: 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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial