【VUE组件开发】VUE随意点击列表元素切换选中样式，并有序数组添加索引和数值

朴灿烈づ我的快乐病毒、 2022-05-15 09:40 176阅读 0赞

直接查看代码以及样式

<template>
        <div>
            
            <div class="dataStep">
                
                <div class="step">
                    <div class="stepText" :class="{nowStepText:nowStep}">选择导出项</div>
                    <div class="stepItem" :class="{nowStepItem:nowStep}">1</div>
                </div>
                <div class="step">
                    <div class="stepText" :class="{nowStepText:!nowStep}">选择导出方式</div>
                    <div class="stepItem" :class="{nowStepItem:!nowStep}">2</div>
                </div>
            </div>
            <div class="sline"></div>
            
    
            
            <div class="StepContent">
                <div class="ContentTitle">请选择要导出的内容</div>
                <div class="bline"></div>
                <div class="ContentBox">
                    <div v-for="(item,index) in SelItemData" class="SelItem" :class="{nowSelItem:SelItemData[index].show}"
                         @click="AddItem(index)" :key="index">{
       {item.name}}
                    </div>
                </div>
            </div>
            
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    nowStep: true,
                    SelItemData: [
                        {show: false, name: "一"},
                        {show: false, name: "二"},
                        {show: false, name: "三"},
                        {show: false, name: "四"},
                        {show: false, name: "五"},
                        {show: false, name: "六"},
                        {show: false, name: "七"}
                    ],
                    tempNeeds:[],//存needs的索引值
                    needs: [],//需要导出的内容
                }
            },
    
            methods: {
    
                AddItem(index) {
                    /*功能：随意点击任意按钮值，向数组有序的添加元素*/
                    //判断是否显示
                    this.SelItemData[index].show = !this.SelItemData[index].show
                    if(this.SelItemData[index].show){
                        //如果show=true，就向tempNeeds[]中添加，并重新排序
                        this.tempNeeds.push(index)
                        //扩展sort排序
                        this.tempNeeds.sort(function (a,b) {
                            return a-b;
                        })
                    }else {
                        //找到该值在tempNeeds中的索引并删除
                        this.tempNeeds.splice(this.tempNeeds.indexOf(index),1)
                    }
                    //每次点击添加或取消元素选择的时候，先清空tempNeeds，再将现在所有选择的元素push到needs
                    this.needs.splice(0,this.needs.length)
                    for(var i=0;i<this.tempNeeds.length;i++){
                        //循环tempNeeds，里面存的是需要存needs的SelItemData数组索引
                        this.needs.push(this.SelItemData[this.tempNeeds[i]].name)
                    }
    
                    console.log(this.tempNeeds);
                    console.log(this.needs);
                }
            }
        }
    </script>
    
    <style scoped>
        /*顶部step*/
        .dataStep {
            width: 96%;
            max-width: 540px; /*no*/
            height: 85px;
            margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
        }
    
        .dataStep .step {
            width: 220px;
            height: 85px;
            text-align: center;
            padding: 0 40px;
        }
    
        .dataStep .stepText {
            font-family: PingFang-SC-Medium;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #ffffff;
            opacity: 0.2;
        }
    
        .dataStep .stepItem {
            width: 42px;
            height: 42px;
            line-height: 42px;
            font-family: PingFang-SC-Medium;
            font-size: 28px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #5e5e5e;
    
            background-color: #ffffff;
            border: solid 1px #5e5e5e;
            margin: 0 auto;
            border-radius: 100%;
        }
    
        .nowStepText {
            color: #007aff !important;
            opacity: 1 !important;
        }
    
        .nowStepItem {
            background-color: #1965fe !important;
            color: #ffffff !important;
            box-shadow: 0px 3px 7px 0px rgba(18, 18, 75, 0.35);
        }
    
        .sline {
            width: 96%;
            margin: 0 auto;
            border-bottom-width: 2px; /*no*/
            border-bottom-style: solid;
            border-bottom-color: #56568A;
            position: relative;
            top: -15px;
            z-index: 1;
        }
    
        /*顶部step*/
    
        /*选择导出内容*/
        .bline {
            width: 96%;
            margin: 0 auto;
            /*border-bottom: 5px dashed #56568A;*/
            border-bottom-width: 2px; /*no*/
            border-bottom-style: dashed;
            border-bottom-color: #56568A;
        }
    
        .StepContent {
            width: 96%;
            max-width: 540px; /*no*/
            height: 420px;
            background-color: #252568;
            border-radius: 20px;
            margin: 0 auto;
            margin-top: 70px;
        }
    
        .ContentTitle {
            font-family: PingFang-SC-Bold;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            height: 85px;
            line-height: 85px;
            letter-spacing: 0px;
            color: #ffffff;
    
            text-align: center;
        }
    
        .ContentBox {
            height: 330px;
    
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
    
            box-sizing: border-box;
            padding: 30px 20px 0px 20px;
        }
    
        .SelItem {
            width: 220px;
            height: 80px;
            line-height: 80;
            background-color: #ffffff;
            border-radius: 10px;
    
            font-family: PingFang-SC-Medium;
            font-size: 30px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 80px;
            letter-spacing: 0px;
            color: #8d8d8d;
            text-align: center;
        }
    
        .nowSelItem {
            background-color: #037dea !important;
            color: #ffffff !important;
        }
        /*选择导出内容*/
    
    </style>

![70][]![70 1][]

[70]: https://img-blog.csdn.net/20180828094503401?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220515/059c2960c2e94f728bff7f223054d019.png