因为需求与组件提供的例子有所出入,所以需要自定义部分样式
这是组件库文档给的例子
<template>
<u-steps current="0">
<u-steps-item title="已下单" desc="10:30"></u-steps-item>
<u-steps-item title="已出库" desc="10:35" ></u-steps-item>
<u-steps-item title="运输中" desc="11:40"></u-steps-item>
</u-steps>
</template>
部分属性的含义:
direction row-横向,column-竖向
current 设置当前处于第几步
title 标题文字
desc 描述文本
iconSize 图标大小
根据提供的原型图,发现需要我自定义图标和描述文本
查阅文档,发现可以使用插槽实现,但是只有图标和描述文本有插槽
下面为使用插槽自定义的代码
<u-steps current="1" direction="column">
<u-steps-item>
// 使用插槽自定义icon图标
<text class="icon" slot="icon"></text>
// 使用插槽自定义描述文本,可展示多行
<view class="info" slot="desc">
<view class="text1 orange">11111</view>
<view class="text2">22222</view>
</view>
</u-steps-item>
...
</<u-steps>