Colorpicker of Vue Components
npm install @caohenghu/vue-colorpicker``bash`
$ yarn add @caohenghu/vue-colorpicker
`html
:color="color"
:sucker-hide="false"
:sucker-canvas="suckerCanvas"
:sucker-area="suckerArea"
@changeColor="changeColor"
@openSucker="openSucker"
/>
`
| Name | Type | Default | Description |
| ------------------ | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| theme | String | dark | dark or light |#000000
| color | String | | rgba or hex |['#000000', '#FFFFFF', '#FF1900', '#F47365', '#FFB243', '#FFE623', '#6EFF2A', '#1BC7B1', '#00BEFF', '#2E81FF', '#5D61FF', '#FF89CF', '#FC3CAD', '#BF3DCE', '#8E00A7', 'rgba(0,0,0,0)']
| colors-default | Array | | like ['#ff00ff', '#0f0f0f', ...] |vue-colorpicker-history
| colors-history-key | String | |true
| sucker-hide | Boolean | | true or false |null
| sucker-canvas | HTMLCanvasElement | | like document.createElement('canvas') |[]
| sucker-area | Array | | like [x1, y1, x2, y2] |
> color is one-way data flow, so you can't use v-model. why? because you'll listen changeColor event do more things, so i think it's not necessary here.
| Name | Type | Args | Description |
| ----------- | -------- | ------ | ------------------------------- |
| changeColor | Function | color | { rgba: {}, hsv: {}, hex: ''} |true
| openSucker | Function | isOpen | or false |
> if you want use sucker, then openSucker, sucker-hide, sucker-canvas, sucker-area is necessary. when you click sucker button, you can click it again or press key of esc` to exit.