Package Exports

@duoa/vue-color-picker

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 (@duoa/vue-color-picker) 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

Color Picker base on Vue2.x

Take a glance

Online Demo

Installation

npm i -S @duoa/vue-color-picker

Usage

import Vue from 'vue'
import VueColorPicker from '@duoa/vue-color-picker'
// Because this components has its styles, you must also import the css file.
import '@duoa/vue-color-picker/dist/vue-color-picker.css'

// Register
Vue.use(VueColorPicker)

Declare the component

<template>
  <vue-color-picker v-model="color" />
</template>
<script>
export default {
  data () {
    return {
      color: '#ff00ff'
    }
  }
}
</script>

That's all you need to do!

If you want to customize the component name. Here is an example.

import Vue from 'vue'
import { component } from '@duoa/vue-color-picker'
import '@duoa/vue-color-picker/dist/vue-color-picker.css'

// Register
Vue.component('MyColorPicker', component)

Configuration

Name	Type	Default Value	Required	Description
value / v-model	string	''	--	binding value
colorFormat	string	hex (when show-alpha is false)/ rgb (when show-alpha is true)	--	color format of v-model, `hsl` / `hsv` / `hex` / `rgb` is accepted
showAlpha	boolean	false	--	whether to display the alpha slider
disabled	boolean	false	--	whether to disable the picker
appendToBody	boolean	false	--	whether to append picker popup itself to body. A nested picker popup should have this attribute set to `true`
predefine	array	[]	--	predefined color options

Events

Event Name	Description	Parameters
before-open	triggers before the picker opens	--
change	triggers when the selected color changes	current selected color
close	triggers when the picker closes	--