vue2 在循环里,给字体加上随机颜色并加上随机图标且少重复

在循环里,给字体加上随机颜色并加上随机图标且少重复

<template><div class="pbfb5"><el-row :gutter="32"><el-col :xs="6" :sm="6" :lg="6" style="margin-bottom:32px;" v-for="(item,index) in costTypeList" :key="index"><div class="card"  ><p class="title">{{item.name}}</p><svg-icon :icon-class="getRandomIcon()"  class-name='cost-class' :style="{color:getRandomBlueColor()}"/></div></el-col></el-row></div>
</template><script>export default {data() {return {// 遮罩层loading: true,usedIcons:[],//跟踪已使用图标iconClassList:['bx1','bx2','bx3','bx4','bx5','bx6','bx7','bx8','bx9','bx10','bx11','bx12','bx13'],costTypeList:[{id:1,name:'差旅费'},{id:2,name:'技术支持费'},{id:3,name:'餐补费'},{id:4,name:'采买费'},{id:5,name:'外出费'},{id:6,name:'请客费'},{id:7,name:'额外补贴费'}]}},created() {},methods: {// 生成以蓝色为主的随机颜色getRandomBlueColor() {return `rgb(${Math.floor(Math.random() * 100) + 100}, ${Math.floor(Math.random() * 50) + 100}, ${Math.floor(Math.random() * 150) + 100})`;},// 随机图标类名 图标少重复getRandomIcon() {// 如果所有图标都已使用,重置usedIcons数组if (this.usedIcons.length === this.iconClassList.length) {this.usedIcons = []; // 或者使用 this.usedIcons = this.iconClassList.slice(); 来复制数组}// 从未使用的图标中随机选择一个const unusedIcons = this.iconClassList.filter(icon => !this.usedIcons.includes(icon));const randomIconIndex = Math.floor(Math.random() * unusedIcons.length);const randomIcon = unusedIcons[randomIconIndex];// 将选择的图标添加到已使用的图标数组中this.usedIcons.push(randomIcon);return randomIcon;},},}
</script><style scoped>.card {background: #f2fbfb;display: flex;position: relative;flex-direction: column;justify-content: space-between;padding: 10%;cursor: pointer;.title{color:#333;font-size: 1.1rem;}}.card svg {position: absolute;right: 16px;top: 50%;margin-top: -40px;height: 80px;width: 80px;transition: all 0.5s ease-in-out;}.card:hover svg {transform: scale(1.2);}.cost-class{color:#333;}
</style>

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

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

相关文章

(四)相关性分析 学习简要笔记 #统计学 #CDA学习打卡

目录 一. 相关性分析简介 二. 相关性分析方法 1&#xff09;连续型变量vs连续型变量&#xff1a;Pearson/Spearman &#xff08;a&#xff09;Pearson &#xff08;b&#xff09;Spearman等级相关系数 2&#xff09;二分类变量&#xff08;自然&#xff09;vs连续型变量&…

macos知名的清理软件 cleanmymac和腾讯柠檬哪个好 cleanmymacx有必要买吗

MacOS是一款优秀的操作系统&#xff0c;但是随着使用时间的增加&#xff0c;它也会产生一些不必要的垃圾文件&#xff0c;占用磁盘空间和内存资源&#xff0c;影响系统的性能和稳定性。为了保持MacOS的清洁和高效&#xff0c;我们需要使用一些专业的清理软件来定期扫描和清除这…

CentOS服务器安装宝塔(图文详解)

宝塔的操作其实就是类似于把linux的指令使用方式&#xff0c;通过宝塔这个第三方工具进行可视化展示&#xff0c;但其实&#xff0c;他还是在操作linux&#xff0c;只是不需要你去记那么多的指令&#xff0c;宝塔把大多数的工具都集成到自己里面&#xff0c;这样你就可以在宝塔…

信号量Semaphore

什么是信号量&#xff1f; C中的信号量&#xff08;Semaphore&#xff09;是一种同步对象&#xff0c;用于控制对共享资源的访问&#xff0c;以防止多个线程或进程同时访问同一资源&#xff0c;从而避免数据不一致的问题。信号量通过维护一个计数值来实现这一功能&#xff0c;…

【Golang】Gin教学-获取请求信息并返回

安装Gin初始化Gin处理所有HTTP请求获取请求的URL和Method获取请求参数根据Content-Type判断请求数据类型处理JSON数据处理表单数据处理文件返回JSON响应启动服务完整代码测试 Gin是一个用Go&#xff08;又称Golang&#xff09;编写的HTTP Web框架&#xff0c;它具有高性能和简洁…

Event loop(Message loop)

事件循环&#xff08;消息循环&#xff09; 浏览器的进程模型 进程 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 线程 …

Java并发体系--atomic--字段类

atomic--字段类 Atomic字段类是一种原子操作类&#xff0c;用于实现多线程环境下对共享变量的原子操作。它可以确保在并发情况下&#xff0c;对共享变量的操作是原子性的&#xff0c;不会出现线程安全问题。 Atomic字段类提供了一些方法&#xff0c;比如get()和set()方法用…

【Linux学习】Linux权限(二)

文章目录 &#x1f680;Linux权限管理&#x1f680;修改文件的所有者&#x1f680;修改文件或目录的所属组&#x1f680;同时修改为念的拥有者与所属组&#x1f680;文件类型&#x1f680;file指令&#x1f680;目录权限&#x1f680;umask指令&#x1f680;粘滞位 &#x1f68…

Ubuntu22.04.4 - Redis - 笔记

一、安装 sudo apt update sudo apt install redis-serverrootzheng:/etc# redis-cli --version redis-cli 6.0.16二、配置文件修改 配置文件地址 /etc/redis/redis.conf 1、开启远程访问 # 注释掉绑定地址#bind 127.0.0.1&#xff0c;让Redis可远程访问 # bind 127.0.0.1 …

论系统的安全架构的三个论点写一篇论文

撰写一篇围绕系统的安全架构三个论点的论文能够提供深刻的见解关于如何构建一个既安全又可靠的系统。接下来&#xff0c;我们将详细探讨这三个论点&#xff0c;并提供一个论文大纲来指导你如何组织和展开你的论述。 论文大纲 1. 引言 简要介绍系统安全架构的重要性&#xff…

Linux 内核的汇编级别的系统调用

2024年4月19日&#xff0c;周五下午 Linux 内核支持多种汇编级别的系统调用&#xff0c;这些系统调用通常以软中断&#xff08;soft interrupt&#xff09;的方式实现。 这里列举了一些常见的汇编级别的系统调用&#xff1a; x86 架构下的 int 0x80 调用&#xff1a;在 x86 架…

网盘——私聊

在私聊这个功能实现中&#xff0c;具体步骤如下&#xff1a; 1、实现步骤&#xff1a; A、客户端A发送私聊信息请求&#xff08;发送的信息包括双方的用户名&#xff0c;聊天信息&#xff09; B、如果双方在线则直接转发给B&#xff0c;不在线则回复私聊失败&#xff0c;对方…

TLV262x系列单电源运算放大器

这份文件是德州仪器&#xff08;Texas Instruments&#xff09;关于TLV262x系列单电源运算放大器的数据手册。以下是该文件的核心内容概要&#xff1a; 产品系列描述&#xff1a; TLV262x系列是德州仪器&#xff08;Texas Instruments&#xff09;推出的一系列低功耗、宽带宽的…

Sping源码(七)—ConfigurationClassPostProcessor创建流程

序言 前两篇文章介绍了invokeBeanFactoryPostProcessors的执行流程&#xff0c;和自定义实现BeanDefinitionRegistryPostProcessor类的方式方法。 这篇文章会主要介绍Spring启动加载xml时&#xff0c;ConfigurationClassPostProcessor类是如何加载到Spring中&#xff0c;并且…

VScode 里面使用 python 去直接调用 CUDA

上一个 帖子主要分享了如何 去将 C 程序 打包成一个package。 我们最后的 目的实际上是想把 CUDA 的程序 打包成 一个 Package &#xff0c; C 程序只是起到了桥梁的作用&#xff1a; 首先&#xff1a;CUDA 程序 和 C 的程序一样&#xff0c; 都有一个 .cu 的源文件和 一个 .…

【数学建模】最优旅游城市的选择问题:层次分析模型(含MATLAB代码)

层次分析法&#xff08;The analytic hierarachy process&#xff0c;简称AHP&#xff09;是一种常用的决策分析方法&#xff0c;其基本思路是将复杂问题分解为多个组成部分&#xff0c;然后对这些部分进行逐一评估和比较&#xff0c;最后得出最优解决方案。&#xff08;例如&a…

JVM知识点总结二

参考文章&#xff1a;【Java面试题汇总】JVM篇&#xff08;2023版&#xff09;_jvm面试题2023-CSDN博客 1、说说你了解的JVM内存模型&#xff1a; JVM由三部分组成&#xff1a;类加载子系统、运行时数据区、执行引擎 JVM内存模型&#xff1a; 内存模型里的运行时数据区&#…

mongodb 实现两个集合的关联并分页查询

问题描述 实现两个集合的关联并分页查询。 假设&#xff1a; collection1中有deviceId等字段&#xff0c;collection2 中有deviceId、unitName等字段&#xff0c; 关联这两个colltion&#xff0c;并分页查询 代码实现 public ResponseEntity<String> getPageList(Reque…

ruby 配置代理 ip(核心逻辑)

在 Ruby 中配置代理 IP&#xff0c;可以通过设置 Net::HTTP 类的 Proxy 属性来实现。以下是一个示例&#xff1a; require net/http// 获取代理Ip&#xff1a;https://www.kuaidaili.com/?refrg3jlsko0ymg proxy_address 代理IP:端口 uri URI(http://www.example.com)Net:…

机器学习 | 使用Scikit-Learn实现分层抽样

在本文中&#xff0c;我们将学习如何使用Scikit-Learn实现分层抽样。 什么是分层抽样&#xff1f; 分层抽样是一种抽样方法&#xff0c;首先将总体的单位按某种特征分为若干次级总体&#xff08;层&#xff09;&#xff0c;然后再从每一层内进行单纯随机抽样&#xff0c;组成…