vue-pick-colors

A Color picker for Vue.js 3
113,643 53
vue vuejs vue3 component color picker color picker pick vue-pick-colors vue pick colors
Install
npm install vue-pick-colors
Latest Version:1.8.0
Vue:3
License:MIT
Last Updated:Feb 6, 2025
Links: GitHub  ·  npm
Maintainer: ayuan0707

vue-pick-colors

🎉 vue3 颜色拾取器

English

Demo

安装

npm install vue-pick-colors

或者

yarn add vue-pick-colors

使用

<template>
  <pick-colors v-model:value="value"/>
</template>

<script lang="ts" setup>
  import PickColors from 'vue-pick-colors'
  const value = ref('#ff4500')
</script>

API

属性 说明 类型 默认值 版本
value(v-model) 值，支持hex、rgb、rgba、hsl、hsla、hsv、hsva string ｜ string[] —
show-picker(v-model) 控制拾取器隐藏或显示 boolean — 1.5.0
size 颜色块大小 number | string 20
width 色块宽度如果为空使用 size属性 number | string — 1.5.0
height 色块高度如果为空使用 size属性 number | string — 1.5.0
theme 主题 light ｜ dark light
colors 预留颜色组支持hex、rgb、rgba、hsl、hsla、hsv、hsva string [] ['#ff4500','#ff8c00','#ffd700', '#90ee90','#00ced1','#1e90ff', '#c71585','#ff4500','#ff7800', '#00babd','#1f93ff','#fa64c3']
format 颜色值格式化 hex ｜ rgb ｜ hsl ｜ hsv hex
show-alpha 是否支持透明度选择 boolean false
add-color 是否支持添加颜色 boolean false
popup-container 定义拾取器的容器 string | Vue.RendererElement| boolean 'body' 1.5.0
z-index 拾取器的层级 number 1000 1.5.0
max 添加颜色最大数 number 13
format-options 格式选项，当为false时，不出现选项 (hex ｜ rgb ｜ hsl ｜ hsv) [] | false false 1.7.0
position 定位方式 absolute | fixed absolute 1.7.0
placement 弹出窗口的位置 bottom | top | left | right bottom 1.7.0

事件

事件名 描述 参数 版本
change 颜色值变化 function(value: string｜string [],color: string,index: number)
formatChange 格式变化 function(format: string) 1.7.0
close-picker 关闭拾取器 function(value: string｜string []) 1.5.0
overflow-max 颜色添加达到最大值 —

Related Packages

vue-color-next

🎨 Vue Color Picker Component for Vue 3.x

1,220 5
color color picker component picker vue vue3
vue-color-picker-wheel

A Vue color picker component based on the Farbtastic jQuery Color Picker plug-in

34,843 26
color color picker component picker vue farbtastic vue.js
vue-iro-color-picker

Vue color picker

1,764 9
color picker vue
abundant-color-picker

一个丰富的颜色选择器

505
color picker vue3
vue-swatches

Help the user picking beautiful colors!

485,747 565
color picker vuejs color-picker

Version History

Version Released License
1.8.0 MIT
1.7.8 MIT
1.7.7 MIT
1.7.6 MIT
1.7.5 MIT