基于 Vue3 的颜色选择器

本组件是基于Vue3 语法, 如果是 Vue2 的用户，推荐使用 vue-color 插件

1. 参考文章

• https://blog.csdn.net/qq_43297527/article/details/110188935
• https://blog.csdn.net/maple_leaf_red/article/details/108362552
• https://github.com/xiaokaike/vue-color/blob/master/src/components/Sketch.vue

2. 原理

3. 遇到的问题

• 选择 value 和 saturation 值的圆圈的位置(滑块同理)
  • 直接使用点击事件的里的位置, 在使用时发现有问题
    • 原因: 圆圈使用的是绝对定位, 如何点击时候点击到圆圈这时候点击事件里位置变成基于圆圈位置的位置, 而不是基于背景 div 的位置了
    • 解决办法: 使用点击事件里基于页面的位置 pageX 和 pageY减去背景div的位置,算出圆圈的位置。
      • 背景 div 的位置使用 getBoundingClientRect() 方法来获取(不知道会不会出问题,反正现在没出问题😜)

4. 注意事项

• 最外层的div的css属性里必须有user-select: none; ,否则拖动圆圈,滑块会有问题
• 位置转化颜色、颜色之间互相转换是需要除法的, 会除不整, 所以肯定会有误差

5. 代码

组件接收的数据只能是#9405C6FF或{r: 217,g: 128,b: 95,a: 1}这种的数据,返回的是{r: 217,g: 128,b: 95,a: 1}这种数据
(懒得分组件模块,就都写到了一个文件里了😂)

• GitHub
• Gitee