直接檢視程式碼以及樣式

<template>
    <div>
        <!--頂部step-->
        <div class="dataStep">
            <!--<img src="static/images/DataBgc.png" alt="">-->
            <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>
        <!--頂部step-->

        <!--選擇匯出內容-->
        <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>