Vue3实现一个拾色器功能

<template><div class="color"><button v-if="hasEyeDrop" @click="nativePick">点击取色</button><input v-else type="color" @input="nativePick" v-model="selectedColor" /><p>所选颜色: {{ selectedColor }}</p><p>RGB颜色: {{ rgbColor }}</p></div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';const hasEyeDrop: boolean = 'EyeDropper' in window;
const selectedColor = ref<string>('#ffffff'); // 使用ref来创建响应式数据
let result: Record<string, any> = {}; // 用于存储选择的颜色信息const rgbColor = computed(() => {const hex = selectedColor.value.replace('#', '');const r = parseInt(hex.substring(0, 2), 16);const g = parseInt(hex.substring(2, 4), 16);const b = parseInt(hex.substring(4, 6), 16);return `rgb(${r}, ${g}, ${b})`;
});async function nativePick(e: Event): Promise<void> {const val = e ? (e.target as HTMLInputElement).value : null;if (val) {selectedColor.value = val; // 更新选中的颜色console.log('获得颜色: ' + val);} else {const eyeDropper = new (window as any).EyeDropper(); // 初始化一个EyeDropper对象console.log('按Esc可退出');try {const colorResult = await eyeDropper.open(); // 开始拾取颜色selectedColor.value = colorResult.sRGBHex; // 更新选中的颜色result = colorResult; // 存储颜色信息console.log('获得颜色: ' + colorResult.sRGBHex);// 使用result变量console.log(result);} catch (e) {console.log('用户取消了取色');}}
}
</script><!-- // import { ref } from 'vue';
// const hasEyeDrop: boolean = 'EyeDropper' in window;
// const selectedColor = ref<string>('#ffffff'); // 使用ref来创建响应式数据
// let result: Record<string, any> = {}; // 用于存储选择的颜色信息// async function nativePick(e: Event): Promise<void> {
//   const val = e ? (e.target as HTMLInputElement).value : null;
//   if (val) {
//     selectedColor.value = val; // 更新选中的颜色
//     console.log('获得颜色: ' + val);
//   } else {
//     const eyeDropper = new (window as any).EyeDropper(); // 初始化一个EyeDropper对象
//     console.log('按Esc可退出');
//     try {
//       const colorResult = await eyeDropper.open(); // 开始拾取颜色
//       selectedColor.value = colorResult.sRGBHex; // 更新选中的颜色
//       result = colorResult; // 存储颜色信息
//       console.log('获得颜色: ' + colorResult.sRGBHex);//       // 使用result变量
//       console.log(result);
//     } catch (e) {
//       console.log('用户取消了取色');
//     }
//   }
// }
<style>
.color {width: 100%;height: 100%;background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style> -->

效果图
在这里插入图片描述

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

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

相关文章

Markdown从入门到精通

Markdown从入门到精通 文章目录 Markdown从入门到精通前言一、Markdown是什么二、Markdown优点三、Markdown的基本语法3.1 标题3.2 字体3.3 换行3.4 引用3.5 链接3.6 图片3.7 列表3.8 分割线3.9 删除线3.10 下划线3.11 代码块3.12 表格3.13 脚注3.14 特殊符号 四、Markdown的高…

php爬虫规则与robots.txt讲解

在进行网页爬虫时&#xff0c;有一些规则需要遵守&#xff0c;以避免违反法律&#xff0c;侵犯网站隐私和版权&#xff0c;以及造成不必要的麻烦。以下是一些常见的PHP爬虫规则&#xff1a; 1. 尊重网站的使用条款&#xff1a;在开始爬取之前&#xff0c;请确保你阅读并理解了…

2024黑龙江省职业院校技能大赛信息安全管理与评估样题第二三阶段

2024黑龙江省职业院校技能大赛暨国赛选拔赛 "信息安全管理与评估"样题 *第二阶段竞赛项目试题* 本文件为信息安全管理与评估项目竞赛-第二阶段试题&#xff0c;第二阶段内容包括&#xff1a;网络安全事件响应、数字取证调查和应用程序安全。 极安云科专注技能竞赛…

mysql 快捷登陆

要将 MySQL 的登录命令添加到环境变量中并为其创建别名&#xff0c;可以按照以下步骤进行操作&#xff1a; 1. 打开终端并编辑 /etc/profile 文件&#xff08;使用所有用户的全局设置&#xff09; vim /etc/profile 2. 在文件的末尾添加以下行来设置环境变量和别名 # 将 &q…

openharmony 开发环境搭建和系统应用编译傻瓜教程

一、DevEco Studio 安装 当前下载版本有两个&#xff0c;由于低版本配置会有各种问题&#xff0c;我选择高版本安装 低版本下载链接 HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者 高版本下载链接 OpenAtom OpenHarmony 解压后安装 双击安装 安装配置 二、创建测…

GO设计模式——12、外观模式(结构型)

目录 外观模式&#xff08;Facade Pattern&#xff09; 外观模式的核心角色&#xff1a; 优缺点 使用场景 代码实现 外观模式&#xff08;Facade Pattern&#xff09; 外观模式&#xff08;Facade Pattern&#xff09;又叫作门面模式&#xff0c;是一种通过为多个复杂的子…

IntelliJ IDEA的下载安装配置步骤详解

引言 IntelliJ IDEA 是一款功能强大的集成开发环境&#xff0c;它具有许多优势&#xff0c;适用于各种开发过程。本文将介绍 IDEA 的主要优势&#xff0c;并提供详细的安装配置步骤。 介绍 IntelliJ IDEA&#xff08;以下简称 IDEA&#xff09;之所以被广泛使用&#xff0c;…

docker镜像仓库hub.docker.com无法访问

docker镜像仓库hub.docker.com无法访问 文章主要内容&#xff1a; 介绍dockerhub为什么无法访问解决办法 1 介绍dockerhub为什么无法访问 最近许多群友都询问为什么无法访问Docker镜像仓库&#xff0c;于是我也尝试去访问&#xff0c;结果果然无法访问。 大家的第一反应就是…

HDFS常见题

1. 谈谈什么是Hadoop? Hadoop是一个开源软件框架&#xff0c;用于存储大量数据&#xff0c;并发计算/查询节点的集群上的数据。   Hadoop包括以下内容&#xff1a;     HDFS(Hadoop Distributed File System)&#xff1a;Hadoop分布式文件存储系统。     MapReduce&…

【华为OD题库-084】最长连续子序列-Java

题目 有N个正整数组成的一个序列。给定整数sum&#xff0c;求长度最长的连续子序列&#xff0c;使他们的和等于sum&#xff0c;返回此子序列的长度。如果没有满足要求的序列&#xff0c;返回-1。 输入描述 第一行输入是:N个正整数组成的一个序列 第二行输入是:给定整数sum 输出…

nodejs fs模块

是什么&#xff1a;nodejs提供的操作文件的模块 fs.readFile() fs.writeFile() js中使用 fs模块操作文件&#xff0c;先导入fs const fsrequire(fs)fs.readFile() 读取指定文件的内容 语法格式 fs.readFile(path[, options], callback) path&#xff1a;必选参数&#x…

参数是Id,但要显示接口中的id对应的名称

当下拉数据是个接口&#xff0c;且后台表单和列表中给的参数是Id,但要显示接口中的id对应的名称 先在data中定义要显示的名称 productName 1.form下拉 <el-form-item label"产品名称" prop"productId"><el-select v-model"queryParams.produ…

初学vue3与ts:keep-alive的简单使用

vue2用法 <keep-alive :include"keepAliveNames"><router-view></router-view> </keep-alive> <script>//include代表缓存name是FleetList的组件this.keepAliveNames FleetList </script>vue3用法 <router-view v-slot&qu…

数组循环:使用 for-of 循环

首先我们先创建一个数组&#xff0c;从之前的对象中取得 const menu [...restaurant.starterMenu,...restaurant.mainMenu];在之前&#xff0c;我们如果想要打印数组中的每一个数据&#xff0c;我们通常会写for循环来一个一个打印出来&#xff0c;现在我们可以使用for-of循环…

Elasticsearch:什么是检索增强生成 (RAG)?

检索增强生成 (RAG) 定义 检索增强生成 (RAG) 是一种利用来自私有或专有数据源的信息来补充文本生成的技术。 它将旨在搜索大型数据集或知识库的检索模型与大型语言模型 (LLM) 等生成模型相结合&#xff0c;后者获取该信息并生成可读的文本响应。 检索增强生成可以通过添加来…

在线客服系统有哪些接入方式?

在线客服系统在当今的商业环境中还是非常重要的角色的。它通过提供实时又个性化的客户服务&#xff0c;让客户满意的同时还能提高转化率&#xff0c;更能维护品牌形象。然而企业在选择在线客服系统时必须了解不同的接入方式&#xff0c;以便选择最适合自己的方式。下面我以合从…

消费升级:无人零售的崛起与优势

消费升级&#xff1a;无人零售的崛起与优势 随着人们生活水平的提高&#xff0c;消费内容正在从生存型消费转向以精神体验和享乐为主的发展型消费。社会居民的消费结构不断变迁&#xff0c;明显呈现消费升级趋势。个性化和多元化消费势头正在崛起&#xff0c;特别是无人零售的自…

【教学类-35-02】20231207大班姓名描字帖:A4单面3*10个姓名,双面共60个名字

背景需求&#xff1a; 需求1——需要字帖 大4班班主任说&#xff1a;你能给我们班孩子做一套写名字的字帖吗&#xff1f;我想让他们练习写名字。 我说&#xff1a;没问题。我找找已经有的样式给你看看&#xff0c;再打印。 打开电脑&#xff0c;我把曾经做的一套“大字贴”…

测试:API接口测试

API接口测试 API接口测试是确保应用程序编程接口&#xff08;API&#xff09;在开发过程中正确实现并满足预定功能要求的过程。API是不同软件之间交流的桥梁&#xff0c;负责数据的传输、交换和控制。进行API测试的目的是验证API的功能、性能、安全性和兼容性。 API接口测试的…

【Linux系统化学习】进程地址空间 | 虚拟地址和物理地址的关系

个人主页点击直达&#xff1a;小白不是程序媛 Linux专栏&#xff1a;Linux系统化学习 代码仓库&#xff1a;Gitee 目录 虚拟地址和物理地址 页表 进程地址空间 进程地址空间存在的意义 虚拟地址和物理地址 我们在学习C/C的时候肯定都见过下面这张有关于内存分布的图片&a…