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

element-ui制作多颜色选择器

在这里插入图片描述
将颜色存储到一个数组中去。

<template><div class="color-picker-container" style="margin-top: 10px;"><!-- 显示已选颜色 --><div class="color-selection"><divv-for="(color, index) in selectedColors":key="index"class="color-chip":style="{ backgroundColor: color }"><button @click="removeColor(index)" class="remove-btn">X</button></div><!-- 颜色选择器 --><el-color-pickerv-if="showColorPicker"v-model="currentColor"@change="addColor"show-alphasize="small"class="color-picker"/><div v-if="selectedColors.length < maxColors" class="add-color-btn" @click="showColorPicker = !showColorPicker">+</div></div></div>
</template><script>
export default {data() {return {selectedColors: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#7265E6', '#EBEEF5'], // 默认6个颜色currentColor: null,showColorPicker: false,maxColors: 10 // 最大可选颜色数量};},methods: {addColor(color) {if (color && this.selectedColors.length < this.maxColors && !this.selectedColors.includes(color)) {this.selectedColors.push(color);}this.showColorPicker = false;},removeColor(index) {this.selectedColors.splice(index, 1);},},
};
</script>
<style scoped>
.color-picker-container {position: relative;
}.color-selection {display: flex;flex-wrap: wrap;gap: 8px;margin-bottom: 16px;
}.color-chip {width: 40px;height: 40px;border-radius: 8px; /* 圆角 */position: relative;cursor: pointer;transition: transform 0.1s ease-in-out;
}.color-chip:hover {transform: scale(1.1); /* 悬停时放大 */
}.remove-btn {position: absolute;top: -6px;right: -6px;background-color: white;border: 1px solid #ccc;border-radius: 50%;width: 16px;height: 16px;line-height: 14px;text-align: center;font-size: 10px;cursor: pointer;display: none;
}.color-chip:hover .remove-btn {display: block;
}.add-color-btn {width: 40px;height: 40px;border-radius: 8px; /* 圆角 */background-color: #f0f0f0;border: 1px dashed #dcdcdc;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #8c8c8c;cursor: pointer;transition: background-color 0.3s ease;
}.add-color-btn:hover {background-color: #e0e0e0;
}.color-picker {/*position: absolute;*/bottom: -5px;left: 0;
}
</style>

相关文章:

element-ui制作多颜色选择器

将颜色存储到一个数组中去。 <template><div class"color-picker-container" style"margin-top: 10px;"><!-- 显示已选颜色 --><div class"color-selection"><divv-for"(color, index) in selectedColors"…...

JVM体系结构

目录 一. JVM 规范 二. JVM 实现 (1) HotSpot (2) JRockit (3) IBM JDK&#xff08;J9 VM&#xff09; (4) Azul Zing (5) OpenJ9 三. JVM 实现的选择 四. JVM 的核心组件 五.JVM总结 六.Java 虚拟机&#xff08;JVM&#xff09;架构概述 1.Java 虚拟机&#xff08…...

wandb使用遇到的一些问题

整合了一下使用wandb遇到的问题 1.请问下如果电脑挂了代理&#xff0c;应该怎么办呢&#xff1f;提示&#xff1a;Network error (ProxyError), entering retry loop. 在本地&#xff08;而非服务器&#xff09;运行代码时&#xff0c;常常因为开启代理而无法使用wandb&#…...

Java中的继承

引入继承 Java中使用类对实体进行描述&#xff0c;类经过实例化之后的产物对象&#xff0c;就可以用来表示现实中的实体&#xff0c;描述的事物错综复杂&#xff0c;事物之间可能会存在一些关联&#xff0c;因此我们就需要将他们共性抽取&#xff0c;面向对象的思想中提出了继…...

Cadence笔记--原理图导入PCB

1、以PMU6050为例&#xff0c;首先在原理图双击PMU6050器件&#xff0c;在PCB_Footprint目录填写PCB封装名称并且保存&#xff0c;如下图所示&#xff1a; 2、确保原理图命名的名称不一样&#xff0c;否则会出错&#xff0c;这里PMU6050更改了NC等名称&#xff0c;如下图所示&a…...

从AI生成内容到虚拟现实:娱乐体验的新边界

引言 在快速发展的科技时代&#xff0c;娱乐行业正经历一场前所未有的变革。传统的娱乐方式正与先进技术融合&#xff0c;创造出全新的沉浸式体验。从AI生成的个性化内容&#xff0c;到虚拟现实带来的身临其境的互动场景&#xff0c;科技不仅改变了我们消费娱乐的方式&#xf…...

【Linux】gdb_进程概念

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…...

安全类脚本:拒绝ssh暴力破解

要求如下&#xff1a; 一个小时内&#xff0c;连续密码错误4次。 Linux lastb 命令用于列出登入系统失败的用户相关信息。 实验过程如下&#xff1a; 1. 创建两个IP地址不同的干净环境&#xff0c;分别是&#xff1a;192.168.46.101 Rocky 2 和 192.168.46.120 openEuler 2. 2.…...

Android15源码编译问题处理

最近想在Raspberry Pi5上面运行自己编译的Android15镜像,参考如下链接来处理: GitHub - raspberry-vanilla/android_local_manifest GitHub - raspberry-vanilla/android_kernel_manifest 代码同步完后,编译就出问题了,总是提示: FAILED: analyzing Android.bp files and…...

图解Git——分布式Git《Pro Git》

分布式工作流程 Centralized Workflow&#xff08;集中式工作流&#xff09; 所有开发者都与同一个中央仓库同步代码&#xff0c;每个人通过拉取、提交来合作。如果两个开发者同时修改了相同的文件&#xff0c;后一个开发者必须在推送之前合并其他人的更改。 Integration-Mana…...

Linux内核编程(二十一)USB应用及驱动开发

一、基础知识 1. USB接口是什么&#xff1f; USB接口&#xff08;Universal Serial Bus&#xff09;是一种通用串行总线&#xff0c;广泛使用的接口标准&#xff0c;主要用于连接计算机与外围设备&#xff08;如键盘、鼠标、打印机、存储设备等&#xff09;之间的数据传输和电…...

什么是数据仓库?

什么是数据仓库&#xff1f; 数据仓库&#xff08;Data Warehouse&#xff0c;简称DW&#xff09;是一种面向分析和决策的数据存储系统&#xff0c;它将企业中分散的、异构的数据按照一定的主题和模型进行集成和存储&#xff0c;为数据分析、报表生成以及商业智能&#xff08;…...

计算机网络 (48)P2P应用

前言 计算机网络中的P2P&#xff08;Peer to Peer&#xff0c;点对点&#xff09;应用是一种去中心化的网络通信模式&#xff0c;它允许设备&#xff08;或节点&#xff09;直接连接并共享资源&#xff0c;而无需传统的客户端-服务器模型。 一、P2P技术原理 去中心化架构&#…...

SK海力士(SK Hynix)是全球领先的半导体制造商之一,其在无锡的工厂主要生产DRAM和NAND闪存等存储器产品。

SK海力士&#xff08;SK Hynix&#xff09;是全球领先的半导体制造商之一&#xff0c;其在无锡的工厂主要生产DRAM和NAND闪存等存储器产品。以下是SK海力士的一些主要产品型号和类别&#xff1a; DRAM 产品 DDR4 DRAM 特点: 高速、低功耗&#xff0c;广泛应用于PC、服务器和移…...

FunASR 在Linux/Unix 平台编译

第一步拉取镜像并生成容器&#xff1a; ### 镜像启动 通过下述命令拉取并启动FunASR软件包的docker镜像&#xff1a; shell sudo docker pull \ registry.cn-hangzhou.aliyuncs.com/funasr_repo/funasr:funasr-runtime-sdk-online-cpu-0.1.12 mkdir -p ./funasr-runtime-…...

git操作(Windows中GitHub)

使用git控制GitHub中的仓库版本&#xff0c;并在Windows桌面中创建与修改代码&#xff0c;与GitHub仓库进行同步。 创建自己的GitHub仓库 创建一个gen_code实验性仓库用来学习和验证git在Windows下的使用方法&#xff1a; gen_code仓库 注意&#xff0c;创建仓库时不要设置…...

物联网网关Web服务器--Boa服务器移植与测试

1、Boa服务器介绍 BOA 服务器是一个小巧高效的web服务器&#xff0c;是一个运行于unix或linux下的&#xff0c;支持CGI的、适合于嵌入式系统的单任务的http服务器&#xff0c;源代码开放、性能高。 Boa 嵌入式 web 服务器的官方网站是http://www.boa.org/。 特点 轻量级&#x…...

vue3学习日记8 - 一级分类

最近发现职场前端用的框架大多为vue&#xff0c;所以最近也跟着黑马程序员vue3的课程进行学习&#xff0c;以下是我的学习记录 视频网址&#xff1a; Day2-17.Layout-Pinia优化重复请求_哔哩哔哩_bilibili 学习日记&#xff1a; vue3学习日记1 - 环境搭建-CSDN博客 vue3学…...

前端实习第二个月小结

时间飞快&#xff0c;第一次实习已经过去两个多月&#xff0c;作一些简单的总结和分享。 注&#xff1a;文章整体会比较轻松&#xff0c;提及的经历、经验仅作参考。 一、关于实习/工作内容 1、工作内容 近期做的是管理后台方面的业务&#xff0c;技术栈&#xff1a;前端re…...

深入了解卷积神经网络(CNN):图像处理与深度学习的革命性技术

深入了解卷积神经网络&#xff08;CNN&#xff09;&#xff1a;图像处理与深度学习的革命性技术 导语 卷积神经网络&#xff08;CNN&#xff09;是现代深度学习领域中最重要的模型之一&#xff0c;特别在计算机视觉&#xff08;CV&#xff09;领域具有革命性的影响。无论是图…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...