van-steps改造为一个纵向的时间轴

334 阅读1分钟

背景:做一个h5页面,需要适配移动端,element-ui和antDesign对于移动端触摸不太友好。 vant对于移动端适配很友好。所以选用vant组件库。但是vant组件库没有时间轴组件。因为不想引用过多的组件库,造成资源浪费。所以就根据步骤条,自己写一个。改动特别小。 从这样 image.png 改造为

image.png

一、首先改造图标

设置当前的步骤为-1。这样就不能自动匹配步骤 接着根据vant提供的能力,更改图标 image.png

image.png

二、修改连接线,去除下方的切割线即可,并且设置最后一项的虚线隐藏

image.png