小程序+wepy使用vant的van-steps步骤条

vant中的组件是这样的

项目中的需求样式是

首先找到steps组件


组件中是循环了steps
我修改了绿色框中的代码

接下来就是数据问题了,回到使用van-steps的页面

<van-steps
   steps="{{steps}}"
   active="{{ active }}"
   direction="vertical"
   active-color="#025BFF"
/>

data = {
    active:0,
    steps:[
      {
        text: '步骤一',
        desc: '描述信息',
        time: '2021-11-30',
      },
      {
        text: '步骤二',
        desc: '描述信息',
        time: '2021-11-30',
      },
    ],
};

小程序使用了wepy框架,所以框架基本还是vue语法
这样就出来了上面项目所需求的样式