t-steps-item

StepsItem 步骤项

组件介绍

t-steps-item 是 t-steps 的子组件，用于定义单个步骤的内容，包括标题、时间、描述等信息。支持自定义样式和图标。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

配合 t-steps 组件使用，参考 demo/steps/steps.uvue。

<template>
  <t-steps :current="2" type="primary">
    <t-steps-item title="提交订单" desc="订单已提交"></t-steps-item>
    <t-steps-item title="商家发货" desc="商品已发出"></t-steps-item>
    <t-steps-item title="运输中" desc="快递运输中"></t-steps-item>
    <t-steps-item title="已签收" desc="订单已完成"></t-steps-item>
  </t-steps>
</template>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
title	标题文本	string	''
time	时间文本	string	''
desc	描述文本	string	''
titleClass	标题文本样式类	string	''
timeClass	时间文本样式类	string	''
descClass	描述文字样式类	string	''
activeColor	激活状态文字颜色	string	''
inactiveColor	未激活状态文字颜色	string	''
activeIcon	激活状态的图标	string	''
activeIconClass	激活状态图标的样式类	string	''
barClass	步骤条样式类	string	''
showIndex	是否显示序号	boolean	true
isEvenlyDistributed	是否均匀分布	boolean	false

Events

事件名	说明	回调参数
click	点击时触发	-
transitionend	动画结束时触发	-
initFinished	组件初始化完成时触发	-
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-

Slots

插槽名	说明
default	自定义内容区域

外部类

类名	说明
title-class	标题样式类
time-class	时间样式类
desc-class	描述样式类
active-icon-class	激活图标样式类
bar-class	步骤条样式类