前端vue 实现取色板 的选择

大概就是这样的 

一般的web端框架 都有自带的 的 比如 ant-design t-design 等 前端框架 都是带有这个的

如果遇到没有的我们可以自己尝试开发一下 简单 的 肯定比不上人家的 但是能用 能看 说的过去

我直接上代码了

其实这个取色板 就是一个input  type 是color 的input 

所以我们现在就是使用这个就可以 有个 @input 事件  在这里我们可以在e.target.value中取到颜色

然后 根据自己框架中的全局颜色 把他修改了就行了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Vue组件通信props和$emit用法

父传子&#xff0c;通过props 子传父&#xff0c;通过$emit App.vue <template><div class"app" style"border: 3px solid #000; margin: 10px">我是APP组件<!-- 1.给组件标签&#xff0c;添加属性方式 赋值 --><!-- 添加属性传值 …

untiy 在菜单栏添加自定义按钮 点击按钮弹出一个Unity窗口,并在窗口里添加属性

using System.Collections.Generic; using UnityEditor; using UnityEngine; using UnityEngine.Rendering.PostProcessing;public class AutoGenerateWindow : EditorWindow //这是定义一个窗口 {public string subjecttName "科目名字";//科目的名字public GameOb…

补光灯LED照明 2.7V4.2V5V升60V80V100V升压恒流芯片IC-H6902B

H6902B升压恒流芯片IC确实是一款为LED照明应用设计的稳定且可靠的解决方案。这款芯片具有以下几个显著特点&#xff1a; 高效率&#xff1a;效率高达95%以上&#xff0c;这意味着在驱动LED灯时&#xff0c;电源到LED的能量转换效率非常高&#xff0c;减少了能量损失&#xff0…

抖音本地生活服务商怎么申请?附详细教程!

随着本地生活的发展潜力和行业前景的不断展现&#xff0c;本地生活服务商也逐渐成为了一大热门职业。在此背景下&#xff0c;作为拥有约8亿日活用户的抖音成为了人们选择平台时的优先考虑对象&#xff0c;而以抖音本地生活服务商怎么申请为代表的相关问题也因此在多个创业者群中…

雪花算法改造失败导致ID重复问题分享

背景 雪花算法是分布式应用中应用比较多的 ID 生成算法&#xff0c;某项目中使用该算法生成ID&#xff0c;近期被反馈算法生成的 ID 存在重复的情况&#xff0c;排了一天&#xff0c;终于找到问题根源了。 本文将总结这个 Bug &#xff0c;顺便温故一下雪花算法及改造雪花算法…

mes系统在新材料行业中的应用价值

万界星空科技新材料MES系统是针对新材料制造行业的特定需求而设计的制造执行系统&#xff0c;它集成了生产计划、过程监控、质量管理、设备管理、库存管理等多个功能模块&#xff0c;以支持新材料生产的高效、稳定和可控。以下是新材料MES系统的具体功能介绍&#xff1a; 一、生…

创建 ComfyUI 自定义节点的基本指南

ComfyUI 自定义节点基础教程 开始前的准备理解 ComfyUI 节点创建自定义节点1. 定义节点参数2. 实现节点逻辑3. 与 ComfyUI 集成 测试和改进节点结论 ComfyUI 是一个多功能的Stable Diffusion图像/视频生成工具&#xff0c;能够让开发者设计并实现自定义节点&#xff0c;扩展功能…

无线领夹麦克风哪个牌子好,揭秘降噪领夹麦排行榜内幕!

在当今这个短视频如潮水般涌动的时代&#xff0c;人们的日常生活中掀起了一股新的潮流——用Vlog来捕捉生活的点点滴滴&#xff0c;许多博主在各种短视频和直播平台上开启了他们的副业之旅。这一现象催生了麦克风技术的飞速进步&#xff0c;使其从单一的录音工具转变为拥有多种…

私域运营从0到1冷启动

私域社群的冷启动是一个从无到有的过程&#xff0c;需要策略和耐心来吸引并维护用户。以下是一些步骤和策略&#xff0c;可以帮助你的私域社群实现从0到1的冷启动&#xff1a; 1. **明确目标和定位**&#xff1a; - 确定社群的目标用户和他们的需求。 - 明确社群的主题和…

一文清晰了解CSS——简单实例

首先一个小技巧&#xff1a; 一定要学会的vsCode格式化整理代码的快捷键&#xff0c;再也不用手动调格式了-腾讯云开发者社区-腾讯云 (tencent.com) CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括&#xff1a; 类选择器&#xff1a;以.开头&#xff0c;用于选择具…

多个标签页中复用同一 QTableView

在 PyQt 中实现在多个标签页中复用同一个 QTableView 实例&#xff0c;复用同一个 QTableView 实例可以减少内存和资源的使用。每个 QTableView 实例都会消耗一定的内存和处理资源&#xff0c;如果每个标签页都创建一个新的实例&#xff0c;会增加系统的负担。通过复用实例&…

Hi3861鸿蒙开发环境搭建

1.1 安装配置Visual Studio Code 打开Download Visual Studio Code - Mac, Linux, Windows选择下载安装Windows系统的Visual Studio Code。 下载后进行安装。Visual Studio Code安装完成后&#xff0c;通过内置的插件市场搜索并安装开发所需的插件如图所示&#xff1a; 1.2 安…

2024 年最佳 Figma 字体

字体不仅仅是文本字符&#xff0c;它们还塑造了用户体验。从引导用户浏览界面到传达品牌个性&#xff0c;字体对于设计​​至关重要。然而&#xff0c;找到适合您的网站或应用风格的完美字体可能具有挑战性。 但不要害怕&#xff0c;我们会帮助您&#xff01;请继续关注&#x…

技术成神之路:设计模式(四)工厂方法模式

1.定义 工厂方法模式&#xff08;Factory Method Pattern&#xff09;是一种创建型设计模式&#xff0c;它提供了一种创建对象的接口&#xff0c;而不是通过具体类来实例化对象。工厂方法模式的主要作用是让子类决定实例化哪一个类&#xff0c;从而实现对象创建的延迟到具体子类…

EE trade:千足金是什么意思

千足金(也称足金999、足999、au999等)是一种金含量不低于999‰的黄金&#xff0c;这意味着在一千克的千足金中&#xff0c;至少有999克是纯金。由于其极高的纯度&#xff0c;千足金在市场上比普通的足金价格略高&#xff0c;虽然价格差距可能仅为每克几元&#xff0c;但在大批量…

轴心轨迹的绘制(包含降噪前处理,MATLAB)

由于旋转机械振动波形的噪声干扰大&#xff0c;直接对振动数据特征提取和选择的故障诊断方法&#xff0c;其精度容易受到噪声影响。当前&#xff0c;基于图像的旋转机械故障诊断技术已经得到飞速的发展。针对旋转机械的故障诊断问题&#xff0c;传统方法趋向于从振动数据中提取…

springboot美食分享平台-计算机毕业设计源码45429

基于Web美食分享平台的系统设计与实现 摘 要 本研究基于Spring Boot框架&#xff0c;设计并实现了一个Web美食分享平台&#xff0c;旨在为用户提供一个交流分享美食体验的社区平台。该平台涵盖了用户注册登录、美食制作方法分享发布、点赞评论互动等功能模块&#xff0c;致力于…

精简库存,避免售罄 零售商常见错误及策略

减少库存是库存管理中最容易被误解和管理不善的策略之一。但如果正确执行&#xff0c;精简运营可以大幅降低成本&#xff0c;同时减少缺货和新鲜产品的损坏。 问题是什么&#xff1f;太多企业在尝试精简库存时陷入了同样的陷阱。不依赖过剩库存的库存规划能够提供所需的灵活性…

七款知名电脑监控软件的介绍(2024年电脑监控软件整理推荐)

在信息化迅猛发展的今天&#xff0c;电脑监控软件成为企业管理和安全防护的重要工具。这类软件不仅有助于提高员工工作效率&#xff0c;还能防范数据泄露&#xff0c;保障企业的核心利益。以下是对几款知名电脑监控软件的介绍&#xff0c;它们在各自领域内都有出色表现。 固信…

【MPPT太阳能升压控制器方案】远翔升压恒流驱动芯片FP7209单节电池升压24V,30V,36V,42V,48V全系列方案,高转换效率,输出带短路保护功能

高转换效率&#xff0c;太阳能控制器方案——详解太阳能控制器PWM / MPPT极简方案其设计要点&#xff0c;升压30V&#xff0c;36V&#xff0c;42V&#xff0c;48V 使用单颗芯片FP7209即实现两级升压到30V&#xff0c;36V&#xff0c;42V&#xff0c;48V&#xff0c;相对于单极升…