自定义步骤条

封装自定义步骤条组件

    <div class="step">
        <div class="item_list" v-for="(item, index) in    totalSteps  " :key="index"
            :style="{ width: `calc(100% / ${totalSteps})` }">
            <div class="child_list">
                <!-- 进度圈圈 -->
                <div class="left_cricle" :style="setStyle(index)" @click="onChange(index)">
                    <span v-if="index >= currentStep">{{
            index + 1 }}</span>
                    <i v-else class="el-icon-check"></i>
                </div>
                <!-- 描述 -->
                <div class="middle_text">{{ stepsLabel[index] }}</div>
                <!-- 右边线条 -->
                <div class="right_line" :style="setLine(index)" v-if="index != totalSteps - 1"></div>
            </div>
        </div>
    </div>
</template>

![c85255f5a8fc4899138e0fb6ad97332.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1e077fce983147b1806adb0661c58ba9~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1769&h=174&s=7747&e=png&b=f5f9fd)
<script>
export default {
    name: 'Steps',
    computed: {},
    props: {
        stepsLabel: { // 步骤标题数组
            type: Array,
            default: () => {
                return []
            }
        },
        totalSteps: { // 步骤总数
            type: Number,
            default: 3
        },
        currentStep: { // 当前选中的步骤
            type: Number,
            default: 0
        },
    },
    data() {
        return {}
    },
    methods: {
        onChange(index) { // 点击切换选择步骤
            // if (this.currentStep !== index) {
            //     this.localStep = index
            //     this.$emit('change', index)
            // }
        },
        setStyle(index) {
            return {
                background: index == this.currentStep ? '#0051d9' : '#fff',
                border: index <= this.currentStep ? "2px solid  #0051d9" : '2px solid #d0d3d7',
            }
        },
        setLine(index) {
            return {
                background: index <= this.currentStep ? '#0051d9' : '#d0d3d7'
            }
        },
    }
}
</script>

<style lang="less" scoped>
.step {
    box-sizing: border-box;
    padding-left: 9.6% !important;
    // padding-right: 5%;
    background-color: #f5f9fd;
}

.step,
.item_list {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .child_list {
        margin-left: 5%;
        width: 100%;
        height: 80%;
        // background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .left_cricle {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            border: 1px solid #e3e3e3;
            // background-color: aquamarine;
            display: flex;
            align-items: center;
            justify-content: center;

            span {
                color: #e3e3e3;
            }

            i {
                color: #0051d9;
                font-Size: 1.5rem;
            }
        }
        .middle_text {
            width: 40%;
            // background-color: azure;
        }
        .right_line {
            width: 40%;
            height: 2%;
            // background-color: #0051d9;
        }
    }
}
</style>

效果图

使用