Vue-pick-colors NPM

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	颜色添加达到最大值	—