使用VUE3实现简单颜色盘,吸管组件,useEyeDropper和<input type=“color“ />的使用

1.使用vueuse中的useEyeDropper来实现滴管的功能和使用input中的type="color"属性来实现颜色盘

 效果:

图标触发吸管

input触发颜色盘
 

组件代码部分 :<dropper>  ----  vueuse使用

<template><div class="sRGBHexWrap fbc"><span class="iconStyle fec" @click="handleOpen"><el-icon :size="20"><EditPen /></el-icon></span><span class="colorSpan"><input type="color" :value="defaultValue" @input="updateColor" class="color" v-if="showInput" /></span></div>
</template><script setup>import { useEyeDropper } from '@vueuse/core'
const { open, sRGBHex } = useEyeDropper()
// 引入 Vue 相关的 API
import { ref, watch, onMounted } from "vue";// 定义组件的 props 和 emits
const props = defineProps(['modelValue'])
const emit = defineEmits(["update:modelValue"]);
//默认颜色显示
let defaultValue = '#4EAF31' //默认展示的颜色,使用ref无法触发初始化显示
let showInput = ref(true)   //因为defaultValue不是ref所以需要手动刷新dom
let Value = ref(null) //派发的颜色//获取颜色盘的颜色
const getColor = (newValue) => {showInput.value = falsedefaultValue = newValueValue.value = newValue;showInput.value = true
};//监听接受的值然后进行复制
watch(() => props.modelValue, async (newValue) => {if (newValue) {getColor(newValue)}
}, { immediate: true })//监听滴管颜色
watch(sRGBHex, async (newmodelValue) => {if (newmodelValue) {getColor(newmodelValue)}
})//监听值的变化
watch(Value, async (newValue) => {if (newValue) {emit("update:modelValue", newValue);}
})//获取颜色盘的颜色
const updateColor = (event) => {Value.value = event.target.value;
};//处理打开滴管时候按Esc按钮报错
const handleOpen = () => {try {open();} catch (error) {console.error('Error while opening EyeDropper:', error);}
};</script><style lang="scss" scoped>
.color {background: var(--background-color2);outline: none;box-shadow: none;border: none;
}.sRGBHexWrap {width: 100%;height: 100%;/* background-color: aliceblue; */}.iconStyle {width: 100%;height: 100%;padding: 0px 10px;cursor: pointer;
}.colorSpan {cursor: pointer;width: 50%;height: 50%;border-radius: 5px;
}input {padding: 0px;margin: 0px;
}
</style>

使用组件<dropper>

<dropper v-model="VRColor"></dropper>

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/167420.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python百宝箱】第三维度的魔法:探索Python游戏世界

Python在游戏开发中的魔力 前言 游戏开发一直是计算机科学中最引人入胜和具有挑战性的领域之一。随着技术的不断进步&#xff0c;开发者们寻找着更快、更灵活的工具来实现他们的创意。在这个探索的过程中&#xff0c;Python以其简洁、易学和强大的特性成为了游戏开发的热门选…

C#每天复习一个重要小知识day4:枚举的概念/申明/使用

目录 1.枚举的概念&#xff1a; 2.申明枚举和申明枚举变量&#xff1a; 申明枚举语法&#xff1a; 申明枚举变量语法&#xff1a; 1.枚举的概念&#xff1a; 枚举是什么&#xff1f;枚举是一个比较特别的存在&#xff0c;它是一个命名的整形常量的集合&#xff0c;一般用它…

Flume采集Kafka并把数据sink到OSS

安装环境 Java环境, 略 (Flume依赖Java)Flume下载, 略Scala环境, 略 (Kafka依赖Scala)Kafak下载, 略Hadoop下载, 略 (不需要启动, 写OSS依赖) 配置Hadoop 下载JindoSDK(连接OSS依赖), 下载地址Github 解压后配置环境变量 export JINDOSDK_HOME/usr/lib/jindosdk-x.x.x expo…

AWS CLI和EKSCTL的客户端设置

文章目录 小结过程安装AWS CLI安装EKSCTL在两个Kubernetes Cluster之间切换 参考 小结 在Linux环境中对AWS CLI和EKSCTL的客户端进行了设置。 过程 安装AWS CLI 使用以下指令安装&#xff1a; curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip"…

Qt实现绘制自定义形状

先创建一个继承自QWidget的控件&#xff1a; class MyPainterWidget:public QWidget 重写各种鼠标方法&#xff1a; protected:void paintEvent(QPaintEvent *) override;void mousePressEvent(QMouseEvent *e) override; //按下void mouseMoveEvent(QMouseEvent *e) …

Xposed hook失败的原因

最近对Xposed的比较感兴趣&#xff0c;于是照着网上的给的例子做了一个Xposed模块&#xff0c;但是在安卓模拟器上死活不生效&#xff0c;最后研究发现了两个问题导致&#xff1a; 1、XposedBridgeAPI-89.jar 需要放到项目的lib目录下&#xff0c;而不是libs目录 2、XposedBr…

HEVC-SCC rgb file input

关键字 csc allocateCSCBuffer&#xff08;&#xff09;-> m_apcPicYuvCSC xCheckRDCostIntraCSC():更简单&#xff0c; enum ACTRDTestTypes { ACT_TWO_CLR 0, //two color space ACT_TRAN_CLR 1, //transformed color space ACT_ORG_CL…

补充:如何提高selenium的运行速度?

已经通读该专栏文章的同学,或许对UI自动化测试有了一定的掌握,细心的同学肯定会发现一个问题,当用例量达到一定程度时,对于整体用例的执行速度肯定不会很满意。除了应用多线程运行用例的方式加快速度,有没有其他的方法呢? 今天告诉大家,方法是有的!也是本人新学的。即…

[PyTorch][chapter 66][强化学习-值函数近似]

前言 现实强化学习任务面临的状态空间往往是连续的,无穷多个。 这里主要针对这种连续的状态空间处理。后面DQN 也是这种处理思路。 目录&#xff1a; 1&#xff1a; 原理 2&#xff1a; 梯度更新 3&#xff1a; target 和 预测值 4 流程 一 原理 强化学习最重要的是得到 …

c++版本opencv计算灰度图像的轮廓点

代码 #include<iostream> #include<opencv.hpp>int main() {std::string imgPath("D:\\prostate_run\\result_US_20230804_141531\\mask\\us\\104.bmp");cv::Mat imgGray cv::imread(imgPath, 0);cv::Mat kernel cv::getStructuringElement(cv::MORPH…

任意分圆环下的 RLWE:如何产生正确的噪声分布

参考文献&#xff1a; [Con09] Conrad K. The different ideal[J]. Expository papers/Lecture notes. Available at: http://www.math.uconn.edu/∼kconrad/blurbs/gradnumthy/different.pdf, 2009.[LPR10] Lyubashevsky V, Peikert C, Regev O. On ideal lattices and learn…

thinkphp6生成PDF自动换行

composer安装 composer require tecnickcom/tcpdf 示例 use TCPDF;public function info($university,$performance,$grade,$major){//获取到当前域名$domain request()->domain();//实例化$pdf new TCPDF(P, mm, A4, true, UTF-8, false);// 设置文档信息$pdf->SetCr…

Azkaban极简使用文档

登录 地址: http://服务器ip:8081/, 用户名密码默认都是azkaban 构建项目流程 添加Project 编写工作流文件 在本机新建文件夹如test, 创建一个flow20.project 文件, 内容 azkaban-flow-version: 2.0(固定步骤)编写flow文件, 例如一个最基础的实例 test1.flow nodes:- name…

JAVA序列化和反序列化

JAVA序列化和反序列化 文章目录 JAVA序列化和反序列化序列化什么是序列化&#xff1f;为什么要进行序列化?如何将对线进行序列化具体实现过程 完整代码 序列化 什么是序列化&#xff1f; 就是将对象转化为字节的过程 为什么要进行序列化? 让数据更高效的传输让数据更好的…

Vue中的$nextTick

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Vue篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue中的$nextTick 目录 &#x1f40b;Vue中的$nextTick有什么作用&#xff1f; &#x1f40b;一、…

socket can中是如何根据 结构体can_bittiming_const中的字段 计算bitrate的?

在 SocketCAN 中&#xff0c;can_bittiming_const 结构体用于表示 CAN 总线的定时参数&#xff0c;包括位率&#xff08;bitrate&#xff09;的计算。can_bittiming_const 包含了许多与位率相关的参数&#xff0c;其中一些参数用于计算实际的位率。 下面是一些与位率计算相关的…

小辰的智慧树(差分+前缀和)

登录—专业IT笔试面试备考平台_牛客网 1.考虑总长度之和不能超过m&#xff0c;2考虑限制每棵树高度不能低于ci&#xff0c;如果用二分最短输能截到的高度&#xff0c;还要另外去判断&#xff0c;是否每棵树mid都能严格大于ci &#xff0c;这样容易超时&#xff0c;换个角度&…

SQL常见函数整理 _ lead() 向下偏移

1. 用法 是在窗口函数中使用的函数&#xff0c;它用于获取当前行的下一行&#xff08;后一行&#xff09;的某个列的值。具体来说&#xff0c;LEAD() 函数可用于查找任何给定行的下一行&#xff08;后一行&#xff09;的值&#xff0c;同时也可控制行数偏移量&#xff08;offse…

竞赛选题 题目:基于LSTM的预测算法 - 股票预测 天气预测 房价预测

文章目录 0 简介1 基于 Keras 用 LSTM 网络做时间序列预测2 长短记忆网络3 LSTM 网络结构和原理3.1 LSTM核心思想3.2 遗忘门3.3 输入门3.4 输出门 4 基于LSTM的天气预测4.1 数据集4.2 预测示例 5 基于LSTM的股票价格预测5.1 数据集5.2 实现代码 6 lstm 预测航空旅客数目数据集预…

社交媒体广告数据采集:Jsoup 的最佳实践

搜狐是中国领先的综合门户网站之一&#xff0c;广告在其网站上广泛投放。为了了解搜狐广告的策略和趋势&#xff0c;采集和分析搜狐广告数据变得至关重要。但是&#xff0c;搜狐网站的广告数据通常需要通过网页抓取的方式获取&#xff0c;这就需要一个强大的工具来解析和提取数…