Package Exports

vue-color-picker-wheel

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-color-picker-wheel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Color Picker Wheel

Example

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

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