qiuzongyuan / vue-pick-colors

🎉 一款轻量级 Vue3.x 颜色拾取器

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

vue-pick-colors's Issues

好兄弟，你这个在firefox环境有bug，弹出层fixed到屏幕左上角了。

👆

建议加个鼠标松开回调事件

Returns wrong color format

Upgrading to 1.6.2, color picker returns wrong color format.
For example, this :
<pick-colors v-model:value="colorA" format="rgb" />
The picker returns hsl color format.

It works fine in 1.6.1

Manual input for Color code with 6 digit code

It seemed it does not reflect the change when entering 6 digit code while show alpha is enabled. Is it possible to auto convert 6 digit hex color code to 8 digit?

从 v1.5.7 开始和 Arco Design 中带有鼠标拖拽功能的组件冲突

项目UI使用的是 Arco Design，从 v1.5.1 开始，直至 v1.5.5 这几个版本，如果页面用到了该组件，通过路由跳转至其他页面时会报错；从 v1.5.7 开始，路由跳转不会报错了，但是会和 Arco Design 中带有鼠标拖拽功能的组件冲突。例如在滑动 Slider 组件时，正常情况下，松开鼠标左键就会停止滑动，但是在页面引入该组件后，会使得松开鼠标左键后还能继续滑动，滑动操作无法释放。

升级后很多bug问题

我原来使用1.3.3一直没问题。无意升级到最新版，发现点开颜色选择器vue3就报错：

Popper: Detected CSS transitions on at least one of the following CSS properties: "transform", "top", "right", "bottom", "left". 

 Disable the "computeStyles" modifier's `adaptive` option to allow for smooth transitions, or remove these properties from the CSS transition declaration on the popper element if only transitioning opacity or background-color for example. 

 We recommend using the popper element as a wrapper around an inner element that can have any CSS property transitioned for animations.

而且颜色面板在modal中使用的话跑到最底部，看了一下z-index:9 这看起来不合理。

使用show-picker打开的弹框，选中颜色不生效

使用show-picker属性后，pick-colors 插件无法获取颜色数据

直接显示调色面板及色块宽高设置

• 现在需要点击色块打开面板，希望可以增加一个props直接显示调色面板。
• 希望props.size可以接收数组以设置色块的宽高
  非常感谢

提议一个颜色输入框的功能改动

1. 格式化HEX与RGB可以不限制其他格式的输入，可以自动转换
2. 当前的格式化可以在面板支持切换按钮自动切换

在使用中，有大量的颜色的是HEX和RGB混合输入的，相信这样的改动体验会更好，另外加入吸盘就更完美了

拾色器的位置

拾色器的位置只能在下面吗？可以配置在上方吗？

The default value of `popupContainer` is not `body` as documented

popupContainer的默认值并不像文档中写的那样是body

使用组件的时候如果不显式地传入popupContainer="body"弹出框容器就不会是body而是组件dom中的父元素

vue-pick-colors/src/ColorPicker.vue

Line 109 in eb473cc

popupContainer: {

Control Picker loses link to model value after value is changed.

Using the "Control Picker" button will update the model value only the first time that it is used. If the showPicker is set to true, the value is changed, then set to true again, the picker will have lost reference to the model value and no longer update the value.

This can be seen even on the documentation page under the Control Picker heading: https://qiuzongyuan.github.io/vue-pick-colors/use.html