Vue中 實現簡單的步驟條

1.html

<template>
   
        <div class="step_box">
            <div class="step_item">
                <!-- 使用綁定動態的 class來讓樣式關聯起來 -->
                <div @click="stpeBtn(index)" class="step_item_box" v-for="(item,index) in stepArr" :key="index" :class="{blue:blueColor===index}" >
                    {{item.text}}
                    <div class="step_triangle" :class="{blueJ:blueColor===index}"></div>
                </div>
            </div>
        </div>

</template>

2.script

<script>
    export default {
        name:"CarpiaoPage",
        data(){
            return{
                // 隨便的數據
                stepArr:[
                    {text:'1'},
                    {text:'2'},
                    {text:'3'},
                    {text:'4'},
                    {text:'5'},
                    {text:'6'},
                ],
                // 圓形的索引
                blueColor:0,
                // 三角形的索引
                blueJColor:0,
            }
        },
        methods:{
            // 使用index關聯起來
            stpeBtn(index){
                this.blueColor=index
                this.blueJColor=index
            },
        },
    }
</script>

3.css

<style scoped>
    .Carpiao_container{
        height: 100%;
        width: 100%;
    }
    .step_box{
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .step_item{
        width: 100%;
        height: 20vh;
        display: flex;
        justify-content: space-around;
    }
    .step_item_box{
        width: 10vw;
        height: 20vh;
        background-color: #333;
        border-radius: 40% 40% 40% 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        position: relative;
    }
    /* 步驟圓形的樣式 */
    .blue{
        background-color: #44acf2;
    }
    /* 三角形樣式 */
    .blueJ{
        border-color: transparent transparent transparent #44acf2 !important;
    }
    .step_triangle{
        border-style: solid;
        border-width: 2vw 2vw 2vw 2vw;
        border-color: transparent transparent transparent #333;
        position: absolute;
        right: -6vw;
        top: 7vh;
    }
    .step_item_box:last-child .step_triangle {
            border: none;
        }
</style>

效果圖