VueJS Colorpicker ⚡️

• A simple Vue.js colorpicker 🔴 for custom need.

• This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐️ if you like it 🍻

Requirements

• Vue.js 2.x

✅ Install 👌

npm install vuejs-colorpicker
// or
yarn add vuejs-colorpicker

✅ Usage 🎓

Register the component globally:

Vue.component('colorpicker', require('vuejs-colorpicker'));

Or use locally

import colorpicker from 'vuejs-colorpicker';

✅ Example 🍀

<colorpicker :colors="colors" v-on:selected-color="setColorCode"></colorpicker>

Vue.component('example-component', {
    data() {
        return {
            color_code: null,
            colors: [
                {"hex" : "#FFFFFF"}, {"hex" : "#000000"}, {"hex" : "#FF00FF"}, {"hex" : "#FFFF00"}, 
                {"hex" : "#000FFF"}, {"hex" : "#F0F0F0"}, {"hex" : "#0F0F0F"}, {"hex" : "#00FF00"}
            ],
        }
    },
    methods: {
        setColorCode(color_code) {
            this.color_code = color_code;
        },
    }
});

✅ Props 📖

Name	Type	Description
colors	Array	(required) The colors to be sent to the picker, see eg. for how to send it.
icon	String	(optional) Default is inverted large checkmark icon; Refer Semantic-UI Icons for specifying which icons you want.

✅ Events 👂

Name	Description
selected-color	Emits color_code hex.

NPM :octocat: