vant3 +ts 封装简易step进步器组件

热忱学习

于 2022-06-08 16:51:06 发布

阅读量686

点赞数

分类专栏： vue3+ts vant 文章标签： vue.js javascript typescript

本文链接：https://blog.youkuaiyun.com/qq_42180156/article/details/125187829

版权

本文介绍如何基于Vant3组件库和TypeScript封装一个自定义的Step进度条组件。针对公司需求，对网上找到的Step组件进行调整，通过改变stepActive属性实现动态进度展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司需要这样的step 进度条，vant组件提供的有点难改，所以自己就在网上找了一个，做了一些改动

step 组件用的时候改变stepActive的值

<template>
    <div style="background-color: white">
        <div class="steps">
            <div class="step" v-for="(i, index) in stepList" :key="index">
                <div class="step-head" :class="
                    activeValue == i.stepIndex || i.stepIndex <= activeValue
                        ? 'step-finish'
                        : 'st

最低0.47元/天解锁文章