Native Color Picker Component For Vue

Description:

A pretty clean color picker component based on the native color input.

How to use it:

1. Import and register the color picker component.

import InputColorPicker from "./vue-input-color-picker";
// Globally
Vue.use(InputColorPicker);
// Or locally:
new Vue({
  components: {
    "v-input-colorpicker": InputColorPicker
  },
  data: function() {
    return {
      color: "#222222"
    };
  }
})

2. Add the color picker component to the template.

<v-input-colorpicker  v-model="color" />

3. Available events.

  • @input
  • @change
<v-input-colorpicker v-model="color" @input="handleInput" @change="handleChange" />

Preview:

Native Color Picker Component For Vue

Download Details:

Author: dcustodio

Live Demo: https://dcustodio.github.io/vue-native-color-picker/

Download Link: https://github.com/dcustodio/vue-native-color-picker/archive/refs/heads/master.zip

Official Website: https://github.com/dcustodio/vue-native-color-picker

Install & Download:

# NPM
$ npm i vue-native-color-picker --save

You Might Be Interested In:

Add Comment