Package Exports

vue-colorpicker

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-colorpicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vue-colorpicker

Color picker Vue.js component.

Demo

demo: https://codepen.io/nmcinteer/pen/WOjwKX

Installation

Via npm:

npm install vue-colorpicker

Usage

Javascript:

new Vue({
    el: '#color-picker',
    data: {
        colors: colors,
        selectedColorHex: ''
    },
    components: {
        'color-picker': ColorPicker
    }
});

HTML:

<color-picker :color-options="colors" empty-option="None" input-id="color" v-model="selectedColorHex" default="#DC143C"></color-picker>

Options

color-options - an array of objects of the form:

var colors = [
    {
        "hex": "#FFA07A",
      "name": "Light Salmon"
  },
    {
        "hex": "#CD5C5C",
      "name": "Indian Red"
  },
    {
        "hex": "#DC143C",
      "name": "Crimson"
  },
    {
        "hex": "#20B2AA",
      "name": "Light Sea Green"
  },
    {
        "hex": "#008B8B",
        "name": "Dark Cyan"
    },
    {
        "hex": "#4682B4",
      "name": "Steel Blue"
  }
];

empty-option - Leave empty for no empty option, enter true for an empty option without a label, enter any other string for an empty option with a label
input-id - An ID for the hidden input field
default - The default hex code