使用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,一经查实,立即删除!

相关文章

补充:如何提高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;这就需要一个强大的工具来解析和提取数…

用友BIP与用友BIP对接集成销售出库列表查询连通销售出库单个保存((红字)销售出库审核-v)

用友BIP与用友BIP对接集成销售出库列表查询连通销售出库单个保存(&#xff08;红字&#xff09;销售出库审核-v) 源系统:用友BIP 面向数智化市场&#xff0c;用友倾力打造了全球领先的数智商业创新平台——用友BIP&#xff0c;定位为数智商业的应用级基础设施、企业服务产业的共…

pat实现基于邻接矩阵表示的深度优先遍历

void DFS(Graph G, int v) {visited[v] 1;printf("%c ", G.vexs[v]);for (int i 0; i < G.vexnum; i) {if (!visited[i] && G.arcs[v][i]) DFS(G, i);} }

SpectralGPT: Spectral Foundation Model 论文翻译2

遥感领域的通用大模型 2023.11.13在CVPR发表 原文地址&#xff1a;[2311.07113] SpectralGPT: Spectral Foundation Model (arxiv.org) 实验 ​ 在本节中&#xff0c;我们将严格评估我们的SpectralGPT模型的性能&#xff0c;并对其进行基准测试SOTA基础模型&#xff1a;ResN…

03.依赖倒置原则(Dependence Inversion Principle)

概述 高层模块不应依赖低层模块&#xff0c;二者都应该依赖其抽象。而抽象不应依赖细节&#xff0c;细节应该依赖抽象。依赖倒置原则的中心思想其实就是面向接口编程。 相对于细节的多变性&#xff0c;抽象的东西会稳定的多&#xff0c;所以以抽象为基础搭建的架构自然也会比以…

EMG肌肉电信号处理合集(二)

本文主要展示常见的肌电信号特征的提取说明。使用python 环境下的Pysiology计算库。 目录 1 肌电信号第一次burst的振幅&#xff0c; getAFP 函数 2 肌电信号波长的标准差计算&#xff0c;getDASDV函数 3 肌电信号功率谱频率比例&#xff0c;getFR函数 4 肌电信号直方图…

华清远见嵌入式学习——网络编程——小项目

项目要求&#xff1a; 代码实现&#xff1a; 服务器端&#xff1a; #include <myhead.h>//定义协议包 struct proto {char type;char name[20];char text[128]; };int main(int argc, const char *argv[]) {//判断从终端输入的字符串的个数if(argc ! 3){printf("…

无需API开发,钱方QFPay连接营销系统和广告推广平台

随着电子商务市场的不断发展&#xff0c;企业需要集成各种业务系统&#xff0c;以提高业务效率和降低运营成本。钱方QFPay提供了一种创新的解决方案&#xff0c;帮助企业实现系统间的连接和集成&#xff0c;无需进行复杂的API开发。除了电商系统和客服系统&#xff0c;钱方还能…