https://github.com/qiuzongyuan/vue-pick-colors
🎉 一款轻量级 Vue3.x 颜色拾取器
https://github.com/qiuzongyuan/vue-pick-colors
color color-picker vue3 vuejs3
Last synced: 6 months ago
JSON representation
🎉 一款轻量级 Vue3.x 颜色拾取器
- Host: GitHub
- URL: https://github.com/qiuzongyuan/vue-pick-colors
- Owner: qiuzongyuan
- License: mit
- Created: 2022-02-02T23:03:49.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-06T08:19:10.000Z (8 months ago)
- Last Synced: 2025-04-07T03:11:16.199Z (6 months ago)
- Topics: color, color-picker, vue3, vuejs3
- Language: Vue
- Homepage: https://qiuzongyuan.github.io/vue-pick-colors/
- Size: 3.07 MB
- Stars: 49
- Watchers: 1
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README-en.md
- License: LICENSE
Awesome Lists containing this project
README
### [vue-pick-colors](https://github.com/qiuzongyuan/vue-pick-colors)
> 🎉 A Color picker for Vue.js 3
> [🇨🇳中文](https://github.com/qiuzongyuan/vue-pick-colors/blob/main/README.md)
### [Demo](https://qiuzongyuan.github.io/vue-pick-colors/use.html)
### Installation
```
npm install vue-pick-colors
```
or
```
yarn add vue-pick-colors
```
### Usage
```
import PickColors from 'vue-pick-colors'
const value = ref('#ff4500')
```
### API
| Property | Description | Type | Default | version |
| -------------------- | ------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------ | ------- |
| value(v-model) | Binding value, support hex、rgb、rgba、hsl、hsla、hsv、hsva | string ｜ string[] | — | |
| show-picker(v-model) | Control picker hide or show | boolean | — | 1.5.0 |
| size | Color block size | number \| string | 20 | |
| width | Color block width, if empty use size | number \| string | — | 1.5.0 |
| height | Color block height, if empty use size | number \| string | — | 1.5.0 |
| theme | Component theme | light ｜ dark | light | |
| colors | Predefined color options support hex、rgb、rgba、hsl、hsla、hsva、hsv | string [] | ['#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1','#1e90ff', '#c71585','#ff4500','#ff7800', '#00babd','#1f93ff','#fa64c3'] | |
| format | Color format | hex ｜ rgb ｜ hsl \| hsv | hex | |
| show-alpha | Whether to display the alpha slider | boolean | false | |
| add-color | Support for adding colors | boolean | false | |
| popup-container | Defines the container for the picker | string \| Vue.RendererElement\| boolean | 'body' | 1.5.0 |
| z-index | The z-index of the picker | number | 1000 | 1.5.0 |
| max | Maximum number of colors to add | number | 13 | |
| format-options | Format options, when false, no options appear | (hex ｜ rgb ｜ hsl ｜ hsv) [] \|false | false | 1.7.0 |
| position | The position of the picker | absolute \|fixed | absolute | 1.7.0 |
| placement | The placement of the picker | bottom \|top \|left \|right | bottom | 1.7.0 |
### Events
| Events Name | Description | Arguments | version |
| ------------ | ------------------ | ------------------------------------------------------------ | ------- |
| change | color value change | function(value: string｜string [],color: string,index: number) | |
| formatChange | format change | function(format: string) | 1.7.0 |
| close-picker | close picker | function(value: string｜string []) | 1.5.0 |
| overflow-max | color added to max | — | |