【JavaScript + CSS】随机生成十六进制颜色

news2024/11/15 15:28:53

效果图
实现

<template>
    <div class="year_area">
        <div class="year_list">
            <el-row :span="24">
                <div :class="showAll">
                    <el-col :span="5" v-for="(item, index) in defaulList" :key="index" class="year_list_content"
                        :style="{ borderLeft: item.color }">
                        <div @click="handleClick(item)" class="year-model">
                            <div class="year_text">
                                <div class="year_text_font">{{ item.year }}</div>
                            </div>
                        </div>
                    </el-col>
                    <div class="search_fload" @click="handFload">
                        <span class="fload_is_show"> {{ showAll ? "收起更多" : "展开更多" }} </span>
                        <i :class="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                    </div>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
import { getAllYear} from "@/api/year.js";

export default{
	data(){
		return{
			showAll:false, // 展开或收起
			allList:[], // 所有项
			defaulList:[] // 默认展开项
		}
	},
    mounted(){
        this.fetchData()
    },
	methods:{
		/**
         * 初始化列表数据
         */
		fetchData(){
			getAllYear().then((res) => {
                this.showAll = false;
                console.log(res.data,"aa");
                res.data.forEach((e) => {
                    this.allList.push({
                        year: e.split("-")[0],
                        color: this.randomHexColor()
                    })
                });
                if(!this.showAll){
                	// 默认仅展示15条
                    this.defaulList= this.allList.slice(0,15)
                }else{
                    this.defaulList= this.allList
                }
            });
		},
			
		/**
         * 展开或合并
         */
        handFload() {
            this.showAll = !this.showAll;
            if (this.showAll) {
                this.defaulList = this.allList;
            } else {
                this.defaulList = this.allList.slice(0, 15);
            }
        },
		
		/**
		* 随机生成十六进制颜色
		*/
		randomHexColor() {
            return (
                "8px solid #" +
                ("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).substr(-6)
            );
        },
        
		/**
		* 跳转到详情页
		*/
 		handleClick(item) {
            this.$router.push({
                path: `/`,
            });
        },
	}
}
</script>
<style scoped lang="less">
.year_area {
    width: 1024px;
    margin: 0 auto;
    min-height: calc(70vh);

    .year_list {
        display: flex;
        width: 1024px;
        padding: 12px;
        flex-direction: column;
        // gap: 12px;
        border-radius: 5px;
        background: #fff;
        margin-top: 12px;

        .year_list_content {
            border-radius: 5px;
            border-bottom: 1px solid #eee;
            border-top: 1px solid #eee;
            border-right: 1px solid #eee;
            background: #fff;
            margin: 10px 20px;
            height: 56px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

            .year-model {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;

                .year_text {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 8px;
                    align-self: stretch;

                    cursor: pointer;

                    .year_text_font {
                        color: #333;
                        font-family: "Source Han Sans CN";
                        font-size: 18px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 24px;
                    }
                }
            }
        }

        .search_fload {
            text-align: center;
            line-height: 70px;
            cursor: pointer;
        }
    }
}
</style>

数据结构

@/api/year.js

[
    "2021",
    "2020",
    "2019",
    "2018",
    "2017",
    "2016",
    "2015",
    "2014",
    "2013",
    "2012",
    "2011",
    "2010",
    "2009",
    "2008",
    "2007",
    "2006",
    "2005",
    "2004",
    "2003",
    "2002",
    "2001"
]