vue手写实现水平步骤条

最新推荐文章于 2024-07-02 11:48:17 发布

一颗青柠~

最新推荐文章于 2024-07-02 11:48:17 发布

阅读量817

点赞数

分类专栏： vue html5+css3 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_44711316/article/details/121166684

版权

本文介绍如何在Vue.js中手写实现一个水平步骤条组件，并在页面中进行实际应用。通过创建`steps.vue`组件，然后在页面中引入并使用，最终展示出预期的步骤条效果。

摘要由CSDN通过智能技术生成

组件 steps.vue

<template>
    <div class="stepBox">
    	//开始
        <div class="stepitem" style="width:100px">
            <div class="img"></div>
            <div :class="activestep >= 1?'circle startendcircle startendactivecircle':'circle startendcircle'"></div>
            <div :class="activestep >= 1?'line startendline activeline':'line startendline'"></div>
        </div>
        //中间步骤条
        <div class="stepitem" v-for="(item,index) in stepList" :key="index" :style="(index+1) == stepList.length?'width:100px':''">
            <img :src="item.activeimg" class="img" v-if="activestep >= (index+1)"/>
            <img :src="item.img" class="img" v-else/>
            <div :class="activestep >= (index+1)?'circle activecircle':'circle'">&