当前位置：首页 > news >正文

vue自定义颜色选择器

news 来源：原创 2025/9/14 8:01:50

vue自定义颜色选择器

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

step0: 默认写法调用系统自带的颜色选择器

       <input type="color">

step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue

<template><div class="container"><!-- 颜色选择器组件 --><ColorPicker v-model="selectedColor" /><!-- 新增的动态背景按钮 --><div><buttonclass="dynamic-button":style="{ backgroundColor: selectedColor }">我的背景色会变化！</button><input type="color"><p>当前选中颜色: {{ selectedColor }}</p></div></div>
</template><script>
import ColorPicker from './ColorPicker.vue'export default {components: { ColorPicker },data() {return {selectedColor: '#ff0000' // 默认颜色}}
}
</script>

step2:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\ColorPicker.vue

<template><div class="color-picker"><!-- 饱和度/明度选择区域 --><divclass="saturation":style="{ backgroundColor: `hsl(${hsv.h}, 100%, 50%)` }"@mousedown="startDrag"><divclass="selector":style="{left: `${hsv.s * 100}%`,top: `${(1 - hsv.v) * 100}%`,backgroundColor: currentColor}"></div></div><!-- 色相滑块 --><div class="hue-slider" @mousedown="startHueDrag"><divclass="hue-pointer":style="{ left: `${(hsv.h / 360) * 100}%` }"></div></div><!-- 颜色显示和输入 --><div class="color-preview" :style="{ backgroundColor: currentColor }"></div><inputv-model="hexColor"class="hex-input"placeholder="#FFFFFF"@input="handleHexInput"></div>
</template><script>
export default {props: {modelValue: String},emits: ['update:modelValue'],data() {return {hsv: { h: 0, s: 1, v: 1 },hexColor: '#ff0000',isDragging: false,isHueDragging: false}},computed: {currentColor() {return this.hsvToHex(this.hsv)}},methods: {startDrag(e) {this.isDragging = truethis.handleDrag(e)window.addEventListener('mousemove', this.handleDrag)window.addEventListener('mouseup', this.stopDrag)},startHueDrag(e) {this.isHueDragging = truethis.handleHueDrag(e)window.addEventListener('mousemove', this.handleHueDrag)window.addEventListener('mouseup', this.stopHueDrag)},handleDrag(e) {if (!this.isDragging) returnconst rect = e.target.getBoundingClientRect()const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height))this.hsv.s = xthis.hsv.v = 1 - ythis.updateHex()},handleHueDrag(e) {if (!this.isHueDragging) returnconst rect = e.target.getBoundingClientRect()const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))this.hsv.h = x * 360this.updateHex()},stopDrag() {this.isDragging = falsewindow.removeEventListener('mousemove', this.handleDrag)window.removeEventListener('mouseup', this.stopDrag)},stopHueDrag() {this.isHueDragging = falsewindow.removeEventListener('mousemove', this.handleHueDrag)window.removeEventListener('mouseup', this.stopHueDrag)},updateHex() {this.hexColor = this.hsvToHex(this.hsv)this.$emit('update:modelValue', this.hexColor)},handleHexInput() {if (/^#([0-9A-F]{3}){1,2}$/i.test(this.hexColor)) {this.hsv = this.hexToHsv(this.hexColor)}},// 颜色转换函数hsvToHex(hsv) {const h = hsv.h / 360let r, g, bconst i = Math.floor(h * 6)const f = h * 6 - iconst p = hsv.v * (1 - hsv.s)const q = hsv.v * (1 - f * hsv.s)const t = hsv.v * (1 - (1 - f) * hsv.s)switch (i % 6) {case 0: r = hsv.v, g = t, b = p; breakcase 1: r = q, g = hsv.v, b = p; breakcase 2: r = p, g = hsv.v, b = t; breakcase 3: r = p, g = q, b = hsv.v; breakcase 4: r = t, g = p, b = hsv.v; breakcase 5: r = hsv.v, g = p, b = q; break}return `#${[r, g, b].map(x => Math.round(x * 255).toString(16).padStart(2, '0')).join('')}`},hexToHsv(hex) {// 转换逻辑（此处省略具体实现）// 返回类似 {h: 0, s: 1, v: 1} 的HSV对象}}
}
</script><style>
.color-picker {width: 300px;padding: 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}.saturation {position: relative;width: 100%;height: 200px;border-radius: 4px;background: linear-gradient(to top, #000, transparent),linear-gradient(to right, #fff, transparent);
}.selector {position: absolute;width: 16px;height: 16px;border: 2px solid white;border-radius: 50%;transform: translate(-8px, -8px);box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}.hue-slider {position: relative;height: 12px;margin: 15px 0;background: linear-gradient(to right,#ff0000 0%,#ffff00 17%,#00ff00 33%,#00ffff 50%,#0000ff 67%,#ff00ff 83%,#ff0000 100%);border-radius: 6px;
}.hue-pointer {position: absolute;width: 16px;height: 16px;background: white;border-radius: 50%;transform: translate(-8px, -2px);box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}.color-preview {width: 40px;height: 40px;border-radius: 4px;border: 1px solid #ddd;
}.hex-input {margin-left: 10px;padding: 8px;width: 100px;border: 1px solid #ddd;border-radius: 4px;
}
</style>

end

vue自定义颜色选择器

vue自定义颜色选择器效果图： step0: 默认写法调用系统自带的颜色选择器 <input type"color">step1:C:\Users\wangrusheng\PycharmProjects\untitled18\src\views\Home.vue <template><div class"container"><!-- 颜…...

编程日记 2025/9/14 8:01:50

（十五）安卓开发中不同类型的view之间继承关系详解

在安卓开发中，View 是所有 UI 组件的基类，不同类别的 View 通过继承关系扩展和特化功能，以满足多样化的界面需求。以下将详细讲解常见 View 类别的继承关系，并结合代码示例和使用场景进行说明。 1. View 继承关系: java.lang.Obj…...

编程日记 2025/9/12 7:04:09

Linux 入门七：从基础到进阶的文件操作

一、Linux 文件系统基础：一切皆文件的哲学在 Linux 的世界里，“一切皆文件” 是核心设计哲学。无论是普通文件、目录、设备（如硬盘、串口），还是网络套接字，都被抽象为文件模型，通过统一的接口…...

编程日记 2025/9/10 9:47:37

DeepSeek的神经元革命：穿透搜索引擎算法的下一代内容基建

DeepSeek的神经元革命：穿透搜索引擎算法的下一代内容基建 ——从语义网络到价值共识的范式重构一、搜索引擎的“内容饥渴症”与AI的基建使命 2024年Q1数据显示，百度索引网页总数突破3500亿，但用户点击集中在0.78%的高价值页面。这种“数据…...

编程日记 2025/9/6 3:54:35

【时时三省】(C语言基础)用switch语句实现多分支选择结构例题

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省例题： 用switch语句处理菜单命令。在许多应用程序中，用菜单对流程进行控制，例如从键盘输入一个 A 或 a 字符，就会执行A操作，输入一…...

编程日记 2025/9/12 19:27:47

CMake macro

CMake中的macro主要用于在调用处直接展开代码，类似于文本替换，其作用类似于C语言的#define宏，但具备更复杂的结构。以下是详细分析： 1. macro的作用代码展开：调用宏时，其内容会原地展开，如同…...

编程日记 2025/9/11 21:57:47

高防服务器防御DDoS全解析——从架构设计到实战对抗

本文系统阐述高防服务器对抗DDoS攻击的技术原理与实施路径，深度剖析BGP线路、流量清洗、协议栈优化等关键技术，结合2024年最新攻击案例与Gartner防御框架，提供企业级防御体系构建指南，涵盖硬件选型、策略配置、合规审计等全生命周…...

编程日记 2025/8/31 13:04:21

高防IP如何构筑DDoS防线？_解析抗攻击核心技术体系

本文深度解析高防IP防御DDoS攻击的技术实现路径，涵盖流量清洗机制、智能调度策略、混合防护架构三大核心技术体系。通过2023年某金融平台800Gbps混合攻击实战案例，结合Gartner最新防护成熟度模型，给出高防IP部署的六步实施框架与成本优化方案…...

编程日记 2025/9/13 22:37:09

RDD行动算子和累加器

RDD行动算子： 是能触发真正计算数据的算子 reduce:聚集RDD元素 collect:返回数据集所有元素 foreach:分布式遍历元素 count:返回元素个数: first:返回首个元素 take:返回前n个元素 takeOrdered:返回排序后的前n个元素 aggregate:分区和分区间数据聚合 fol…...

编程日记 2025/9/8 0:49:24

【计算机网络】同步操作 vs 异步操作：核心区别与实战场景解析

📌 引言在网络通信和分布式系统中，**同步（Synchronous）和异步（Asynchronous）**是两种基础却易混淆的操作模式。本文将通过代码示例、生活类比和对比表格，帮你彻底理解它们的区别与应用场景。 1…...

编程日记 2025/9/5 22:21:51

iframe学习与应用场景指南

一、iframe核心原理与学习路径 1. 嵌套网站的本质原理技术特性： • 浏览器为每个iframe创建独立的window对象和DOM环境 • 资源独立加载：子页面拥有自己的CSS/JS/Cookie作用域 • 跨域限制：同源策略下无法直接访问DOM（需CORS或…...

编程日记 2025/9/13 9:49:34

基于SSM的线上花店鲜花销售商城网站系统

作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码精品专栏：…...

编程日记 2025/9/11 9:30:41

【大模型理论篇】Search-R1: 通过强化学习训练LLM推理与利⽤搜索引擎

最近基于强化学习框架来实现大模型在推理和检索能力增强的项目很多，也是Deep Research技术持续演进的缩影。之前我们讨论过《R1-Searcher:通过强化学习激励llm的搜索能⼒》，今天我们分析下Search-R1【1】。 1. 研究背景与问题⼤模型（LLM&a…...

编程日记 2025/9/11 21:37:10

错误码code:9568282 error: install releaseType target not same怎么处理?

目录 1.背景 2.解决方案 1.背景当前是由于应用从4.1版本升级到5.0版本，然后安装应用会报错9568282 ，如果签名是一致的&#...

编程日记 2025/8/28 11:44:35

qt联动其他库实现一个客户端（本章主要是概述如何实现）

一.服务器功能 1.能连接多个客户端通信 2.负责统计与手机客户端的数据 3.遇到客户端请求数据时能检索数据库并发送对应数据 4.服务器需要能连接到公网 5.服务器需要有账号密码登录功能 6.服务器要有日志与管理员系统能统计信息二.客户端 1.客户端需要有登录界面 2.客户端需要…...

编程日记 2025/9/12 19:32:20

爱普生FC1610AN5G手机中替代传统晶振的理想之选

在 5G 技术引领的通信新时代，手机性能面临前所未有的挑战与机遇。从高速数据传输到多任务高效处理，从长时间续航到紧凑轻薄设计，每一项提升都离不开内部精密组件的协同优化。晶振，作为为手机各系统提供稳定时钟信号的关键元件&…...

编程日记 2025/9/8 4:59:57

SpringMVC基础二（RestFul、接收数据、视图跳转）

ReauestMapping ReauestMapping注解用于映射url到控制器类或一个特定的处理程序方法。可用于类或方法上，用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。创建一个新项目：设置为web项目编写web.xml（此配置也几…...

编程日记 2025/9/12 20:18:42

BERT - 段嵌入（Segment Embedding）

1. 段嵌入（Segment Embedding）的作用在BERT模型中，段嵌入的主要作用是区分不同的句子。具体来说： 单句任务：所有位置的段嵌入都是0。句子对任务：第一个句子的所有位置使用段嵌入0，第二个句子…...

编程日记 2025/9/9 4:11:10

Kaggle-Disaster Tweets-(二分类+NLP+模型融合)

Disaster Tweets 题意： 就是给出一个dataframe包含text这一列代表着文本，文本会有一些词，问对于每条记录中的text是真关于灾难的还是假关于灾难的。比如我们说今天作业真多，这真是一场灾难。实际上这个灾难只是我们调侃而言的。…...

编程日记 2025/9/11 10:23:35

关于哈希冲突的讨论

文章目录 1. 什么是哈希冲突？2. 为什么会产生哈希冲突？3. 如何解决哈希冲突？4. 为什么哈希算法一定会产生冲突？5. 存在不发生冲突的哈希算法吗？6. 为什么不用无冲突的哈希算法（如完美哈希）&…...

编程日记 2025/9/9 3:52:21

傅利叶发布首款开源人形机器人N1:开发者可实现完整复刻

2025年4月11日，上海——通用机器人公司傅利叶正式发布首款开源人形机器人 Fourier N1，并同步开放涵盖物料清单、设计图纸、装配指南、基础操作软件在内的完整本体资源包。作为傅利叶 “Nexus 开源生态矩阵” 的首个落地项目（“N1” 即 “Nexu…...

编程日记 2025/9/2 22:53:46

2020年INS SCI1区TOP：平衡复合运动优化算法BCMO，深度解析+性能实测

目录 1.摘要2.算法原理3.结果展示4.参考文献5.代码获取 1.摘要元启发式算法因其强大的鲁棒性和简便的编程方式，在优化领域中发挥着重要作用。本文提出了一种基于平衡复合运动优化算法BCMO，其核心思想是在解空间中平衡个体的复合运动特性。通过概率选择…...

编程日记 2025/9/10 6:43:29

2022年全国职业院校技能大赛高职组 “大数据技术与应用” 赛项赛卷（3卷）任务书

2022年全国职业院校技能大赛高职组 “大数据技术与应用” 赛项赛卷（3卷）任务书背景描述：模块A：大数据平台搭建（容器环境）（15分）任务一：Hadoop HA安装部署任务二&#x…...

编程日记 2025/9/3 8:25:30

Express中间件(Middleware)详解：从零开始掌握(4)

下面我将为你提供四个实战项目的完整实现代码，每个项目都展示了Express中间件的实际应用场景。 1. API网关实现 const express require(express); const rateLimit require(express-rate-limit); const helmet require(helmet); const morgan require(morgan)…...

编程日记 2025/9/10 6:46:51

Ubuntu22环境下，Docker部署阿里FunASR的gpu版本

番外：随着deepseek的爆火，人工智能相关的开发变得异常火爆，相关的大模型开发很常见的agent智能体需要ASR语音识别的功能，阿里开源的FunASR几乎是把一个商业的项目放给我们使用了。那么我们项目中的生产环境怎么部署gpu版本的语音识别服务呢？经过跟deepseek的一上午的极限…...

编程日记 2025/9/9 11:22:53

vue springboot 案例收集

vue springboot 案例收集 SpringbootVue前后端分离项目-管理系统 https://blog.csdn.net/m0_56308072/article/details/130893828...

编程日记 2025/8/17 19:31:00

Windows环境下本地部署deepseek-r1或其他大模型【保姆级教程】

目录背景准备工作开始部署下载olloma安装olloma下载deepseek-r1模型使用如何使用结束语背景最近deepseek本地部署的概念越来越火，勾起了我学习的兴趣。我就在思考如何使用家用机或者平时打游戏的机器来本地部署deepseek，给自己开发个智能体来辅佐…...

编程日记 2025/9/10 6:09:48

ubuntu20.04系统安装apollo10.0系统

文章目录前言一、安装基础软件1、更新相关软件2 安装 Docker Engine 二、获取 GPU 支持1、安装显卡驱动2、安装 Nvidia container toolkit 三、安装 Apollo 环境管理工具1、安装依赖软件2、在宿主机添加 Apollo 软件源的 gpg key，并设置好源和更新3、安装aem 四、安…...

编程日记 2025/9/12 6:51:59

图片文本识别OCR+DeepSeekapi实现提取图片关键信息

用到的技术： 通过腾讯OCR文字识别，deepseek的api实现目录需求分析： 文字识别（OCR）具体实现步骤起步工作代码编写 deepseek整合消息，返回文本关键信息起步工作编写工具类具体调用实现具体…...

编程日记 2025/9/14 0:44:46

minio改成https+域名访问

思路有两个： 方式一：通过nginx反向代理，将https配置在nginx，内部的MinIO还是使用HTTP；方式二：MinIO服务端直接配置成HTTPS； 注意： 私钥需要命名为：private.key 公钥需要…...

编程日记 2025/9/10 14:14:42

unity与usb串口通信（web版）

一、本文介绍在web环境下unity与usb串口进行通信的代码本篇使用本地服务器作为unity与串口的中介，unity发送数据到服务器，服务器发送给串口收到响应并解析返回给uinty。使用websocket协议。注： 1.我的硬件是检测磁阻液位，用…...

编程日记 2025/9/7 5:54:05

UE5每次都打开上一次的工程文件 , 如何取消?

点击左上角 - 文件点击打开项目取消勾选 - 启动时固定加载上次打开的项目...

编程日记 2025/9/8 21:32:22

AI大模型与人类未来的协作图景：从工具到“数字共生体”

📝个人主页🌹：慌ZHANG-CSDN博客 🌹🌹期待您的关注 🌹🌹 一、引言：技术跃迁与文明重塑的十字路口 2020年代以来，人工智能特别是**AI大语言模型（Large Language Models, LLMs）**的迅猛发展，正在从根本上改变人类与技术的关系。从最初的“智能写作助手”到今日…...

编程日记 2025/9/1 16:19:38

C++ I/O 性能优化指南

在高性能计算和大规模数据处理中，I/O 性能优化是提升系统整体效率的关键环节。C 作为一种高性能编程语言，提供了丰富的工具和机制来优化 I/O 操作。本文将详细介绍在 Linux 环境下，如何通过代码层面的优化、系统调用的选择以及多线程技术等手…...

编程日记 2025/9/11 14:26:00

全局忽略项目根目录下新增.gitignore文件，写入想要忽略的信息，以下可参考 **/src/main/resources/application-local.yamltarget/ !.mvn/wrapper/maven-wrapper.jar !**/src/main/**/target/ !**/src/test/**/target/### IntelliJ IDEA ### .idea/mod…...

编程日记 2025/9/12 4:48:21

Mamba原理及在low-level vision的工作[持续更新]

文章目录 Mamba原理选择性扫描（Selective Retain Information）：选择有关/无关信息状态空间模型（SSM）Mamba的选择性保留信息Mamba的扫描操作（The Scan Operation） 硬件感知（Hardware-…...

编程日记 2025/9/7 16:13:26

openlayers入门02 -- 地图控件

地图控件 1.视图跳转控件（ZoomToExtent） 视图跳转控件用于将地图快速跳转到指定的范围。示例： // 视图跳转控件（extent这里用的是学校的经纬度范围，可以按照需要修改） const ZoomToExtent new ol.contro…...

编程日记 2025/9/11 4:03:59

Python 装饰器（Decorator）

文章目录代码解析1. 装饰器定义 timer(func)2. 应用装饰器 timer **执行流程****关键点****实际应用场景****改进版本（带 functools.wraps）** 这是一个 Python 装饰器（Decorator） 的示例，用于测量函数的执行时间。下…...

编程日记 2025/9/7 19:34:20

UE的AI判断队伍归属的机制：IGenericTeamAgentInterface接口

从官方论坛老哥那学来的，优点在于使用项目设置，像配置碰撞一样，能配置碰撞通道对其他碰撞通道的反应，如阻挡，忽略，重叠，全局配置队伍归属，也能配置当前队伍对其他队伍的身份识别&…...

编程日记 2025/9/6 14:15:19

安宝特新闻丨Vuzix Core™波导助力AR，视角可调、高效传输，优化开发流程

Vuzix Core™ 光波导技术近期，Vuzix Core™光波导技术赋能AR新视界！该系列镜片支持定制化宽高比调节及20至40视场角范围，可灵活适配各类显示引擎。通过创新的衍射光波导架构，Vuzix Core™实现了光学传输效率与图像质量的双重突破…...

编程日记 2025/9/6 13:29:58

基于springboot留守儿童网站的设计与实现 docx

收藏关注不迷路！！ 🌟文末获取源码数据库🌟 感兴趣的可以先收藏起来，还有大家在毕设选题（免费咨询指导选题），项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多…...

编程日记 2025/8/17 19:32:48

AST 技术进行 JavaScript 反混淆实战

一、AST 技术核心原理抽象语法树（AST） 是代码的“骨架”，它把代码拆解成一个个节点，就像把一棵大树拆成树枝、树叶一样。通过分析和修改这些节点，我们可以精准地还原代码的逻辑。二、实战案例 1：还原字…...

编程日记 2025/9/4 13:51:53

基于ECharts+Spark的疫情防控数据分析平台(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，特别是近几年来，新冠疫情出现以来，疫情防控数据分析平台当然不能排除在外。我本次开发的疫情防控数据分析平台是在…...

编程日记 2025/9/5 22:18:42

wireshark过滤器表达式的规则

1.抓包过滤器语法和实例抓包过滤器类型Type（host、net、port）、方向Dir（src、dst）、协议Proto（ether、ip、tcp、udp、http、icmp、ftp等）、逻辑运算符（&&与、|| 或、！非&am…...

编程日记 2025/9/9 1:05:47

使用 Python 扫描 Windows 下的 Wi-Fi 网络实例演示

使用 Python 扫描 Windows 下的 Wi-Fi 网络代码实现代码解析 1. 导入库2. 解码混合编码3. 扫描 Wi-Fi 网络4. 运行函数这是我当前电脑的 wifi 连接界面。这个是运行的效果图： 代码实现我们使用了 Python 的 subprocess 模块来调用 Windows 的内置命令 netsh…...

编程日记 2025/9/11 16:04:39

Redis 字符串（String）详解

1. 什么是字符串类型在 Redis 中，字符串（String） 是最基本的数据类型。它可以包含任何数据，比如文本、JSON、甚至二进制数据（如图片的 Base64 编码），最大长度为 512 MB。字符串在 Redis 中不…...

编程日记 2025/9/12 20:53:12

【Taro3.x + Vue3】搭建微信小程序

IOS环境为例打开终端环境有多种办法，例举一个：在访达里新建一个文件夹，鼠标右键选择。一、先安装Taro的环境 npm install -g tarojs/cli安装完成后，可以输入命令检验是否安装成功： taro --version二、创建项目 …...

编程日记 2025/9/9 14:28:30

P8668 [蓝桥杯 2018 省 B] 螺旋折线

题目思路一眼找规律题，都 1 0 9 10^9 109说明枚举必然超时，找规律，每个点找好像没有什么规律，尝试找一下特殊点，比如：对角线上的点 4 16 36(右上角） 4k^2，看在第几层（…...

编程日记 2025/9/12 17:18:25

【14】数据结构之哈夫曼树篇章

目录标题哈夫曼树哈夫曼树的定义哈夫曼树的构造哈夫曼编码哈夫曼树的实现哈夫曼树哈夫曼树的定义路径：从一个结点到另一个结点的路线树的路径长度：从树根到树中每个结点的路径长度之和结点的权：在一些应用中，赋予树中结点的…...

编程日记 2025/9/8 15:34:02

初识SpringAI（接入硅基流动deepseek）

①创建项目 ②application.yml spring:application:name: pgs-aiai:openai:api-key: sk-vrozloxjpjgkozaggtodbmwyfmubmxqpdpbvbbxpcgleanugbase-url: https://api.siliconflow.cn/chat:options:model: deepseek-ai/DeepSeek-V3 api-key：去硅基流动官网生成你的密钥…...

编程日记 2025/9/11 10:21:28

相关文章：