基于 Vue3 的颜色选择器_vue-color vue3-程序员宅基地
技术标签： vue 前端 js javascript
本组件是基于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}这种数据
(懒得分组件模块,就都写到了一个文件里了)
智能推荐
ESP32cam系列教程001：使用webcam摄像头实时查看视频_库管理中找不到camera_pins.h-程序员宅基地
文章浏览阅读5.4k次，点赞3次，收藏42次。esp32cam 使用 webcam 摄像头实时查看视频_库管理中找不到camera_pins.h
python资源收录_python获取网站收录-程序员宅基地
文章浏览阅读145次。【腾讯云 云社区】python学习之旅_python获取网站收录
docker 安装gogs并删除注册按钮_gogs 管理员关闭注册-程序员宅基地
文章浏览阅读1k次。（1）下载镜像 docker pull gogs/gogs （2）创建容器 docker run ‐di ‐‐name=gogs ‐p 10022:22 ‐p 3000:3000 ‐v /var/gogsdata:/data gogs/gogs下载镜像 docker pull gogs/gogs创建容器创建对应的文件 mkdir -p /var/jenkins_home创建容器 docker run ‐di ‐‐name=gogs ‐p 10022:_gogs 管理员关闭注册
【渝粤教育】21秋期末考试人力资源管理（专）10083k2_趋中效应是中国传统中庸文化心理在面试中的反映。该效应在面试中的表现是:面试考-程序员宅基地
文章浏览阅读1.1k次。单项选择题1、薪酬对于员工的重要性主要体现不包括？（ ） A、调节功能B、保障功能C、激励功能D、信号功能（2 分）A．DB．BC．AD．C2、员工由工作本身所获得的心理满足和心理收益是（）（2 分）A．内在报酬B．基本薪酬C．激励薪酬D．非财务报酬3、下面哪一项不属于工作说明书的基本内容（ ）。A．工作职责B．工作环境 C．工作权限D．工作中晋升（2 分）A．BB．DC．CD．A4、下面不属于潜在人力资源的是( )A．病残人口 B．老年人口 C．失业人口 D．未成年就业人口_趋中效应是中国传统中庸文化心理在面试中的反映。该效应在面试中的表现是:面试考
属性动画+购物车+结算_title="price-程序员宅基地
文章浏览阅读1.1k次。效果图添加依赖apply plugin: 'com.android.application'android { compileSdkVersion 26 buildToolsVersion "26.0.2" defaultConfig { applicationId "samsung.com.yuekaomoni" min_title="price
尤瓦尔·赫拉利不懂人工智能？_专访尤瓦尔赫拉利-程序员宅基地
文章浏览阅读822次。https://www.toutiao.com/a6684036824584684044/2019-04-26 11:16:36如果您也想和尤瓦尔·赫拉利探讨人工智能、人类历史、机器算法等议题，欢迎留言。美国时间2019年4月22日，人工智能理论家尤瓦尔·赫拉利和计算机科学教授李飞飞博士，展开了一场【人工智能巨变和人工智能的人性化】的硬核对话，并揭示了人工智能技术快速..._专访尤瓦尔赫拉利
随便推点
合肥工业大学数据库实验报告-程序员宅基地
文章浏览阅读649次。在完成这次实验之前，我对数据库管理和SQL语言都只有一些基础的概念和知识。通过这次实验，我深入了解了数据库的概念和原理，学习了SQL语言的基本操作和语法规则，并通过实践掌握了SQL语句的定义、查询和更新等功能。同时，我还学习了如何使用Navicat等可视化数据库管理工具，更加方便地进行数据库的创建、维护和管理。在实验过程中，我遇到了一些问题，如SQL语句的语法错误、表格的定义不完整等等，但通过查阅相关资料和调试，我逐渐解决了这些问题，并加深了对数据库和SQL语言的理解。
原生JS实现购物车结算_"div class=\"fr closing\">结 算</div> <div class=\"f-程序员宅基地
文章浏览阅读5.8k次，点赞5次，收藏9次。http-equiv="Content-Type" content="text/html; charset=utf-8"/> 原生JS实现购物车结算功能代码 *{margin:0;padding:0;list-style-type:none;}a{color:#666;text-decoration:none;}table{border-coll_"div class=\"fr closing\">结 算 合计:￥
android dhcp 服务器,Android推送SDK(10)-DHCP租约到期自动续租问题导致TCP连接异常-程序员宅基地
文章浏览阅读699次。DHCP简单的来说，DHCP是一个局域网协议，使用UDP协议进行工作，它的作用就是动态的分配IP地址，Gateway地址，DNS服务器地址等信息，一旦租约到期，那么路由器就会把当前的这个ip分配给其他设备使用，所以，对于设备而言要定期请求DHCP Server来更新ip地址信息，保证ip地址有效可用DHCP租约到期，设备不会自动进行续租而仍然使用旧的ip地址DHCP租约到期，设备向DHCP Ser..._安卓设备ip租期
matlab生成底层驱动封装库的main.tlc文件_matlab运行tlc文件-程序员宅基地
文章浏览阅读710次。/%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 雨的旋律汽车电子开发板% 网店地址：http://shop108493800.taobao.com/% 技术支持QQ群：153167747%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%/%selectfile NULL_F_matlab运行tlc文件
雷达点云数据.pcd格式转.bin格式_点云pcd转bin文件-程序员宅基地
文章浏览阅读788次，点赞8次，收藏9次。注意，方法1原则上可行，但是本人没整好pypcd的环境方法2是利用open3d的环境，基于python3.7绝对可以的_点云pcd转bin文件
html界面缩放_html页面根据页面大小缩放怎么设置-程序员宅基地
文章浏览阅读1.4k次。【代码】html界面释放。_html页面根据页面大小缩放怎么设置