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

5335ld

于 2024-04-19 16:53:01 发布

阅读量323

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/u014722196/article/details/137970758

版权

本文描述了如何在Vue.js组件中，通过循环为文本添加随机颜色和SVG图标，同时确保图标不重复使用。方法涉及JavaScript的随机数生成和数组操作。

摘要由CSDN通过智能技术生成

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

<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>