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