@duoa/vue-color-picker

Color Picker base on Vue2.x
13,033 6
Install
npm install @duoa/vue-color-picker
Latest Version:1.0.6
Vue:2
License:MIT
Last Updated:Sep 4, 2020
Links: GitHub  ·  npm
Maintainer: duoani

Vue Color Picker

Color Picker base on Vue2.x

Take a glance

Online Demo

Installation

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

Usage

Register the component

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
stop boolean false -- stopPropagation when mousedown or click on popup
prevent boolean false -- preventDefault when mousedown or click on popup

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 --

Related Packages

Version History

Version Released Vue License
1.0.6 2.x MIT
1.0.5 2.x MIT
1.0.4 2.x MIT
1.0.3 2.x MIT
1.0.2 2.x MIT