xtf-steps

组件说明

xtf-steps 是流程进度组件，适用于订单、审批和任务引导。支持横竖布局、自动推导状态、可点击步骤及三个作用域插槽。

基础用法

1. 数字步骤

<template><xtf-steps :items="items" :current="1" /></template>
<script>
export default {
  data() {
    return { items: [{ title: '提交订单' }, { title: '支付订单' }, { title: '完成' }] }
  }
}
</script>

2. 垂直可点击流程

<template><xtf-steps :items="items" direction="vertical" clickable @click="select" /></template>
<script>
export default {
  data() {
    return {
      items: [
        { title: '创建', desc: '已完成' },
        { title: '审核', status: 'process' },
        { title: '发布', disabled: true }
      ]
    }
  },
  methods: {
    select(data) {
      uni.showToast({ title: data.item.title, icon: 'none' })
      console.log(data.index)
    }
  }
}
</script>

3. 自定义节点和标题插槽

<template>
  <xtf-steps :items="items" mode="icon">
    <template #icon="{ index }"><xtf-tag size="sm" :text="String(index + 1)" /></template>
    <template #title="{ item }">
<xtf-text level="body" bold :text="item.title + ' 阶段'"
    /></template>
    <template #desc="{ item }"><xtf-text level="caption" :text="item.desc" /></template>
  </xtf-steps>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { title: '备货', desc: '仓库处理中' },
        { title: '配送', desc: '等待发货' }
      ]
    }
  }
}
</script>

---

全部属性

| 属性 | 类型 | 默认值 | 作用描述 | 适用范围 | | --- | --- | --- | --- | | items | Array | [] | 步骤数据 | 流程数据 | | current | String \| Number | 0 | 自动状态的当前索引 | 未单独指定状态 | | direction | String | 'horizontal' | horizontal/vertical | 布局 | | mode | String | 'number' | number/icon/其他为圆点 | 节点样式 | | nodeSize/lineThickness | String \| Number | 44/4 | 节点和连接线尺寸 | 尺寸调整 | | clickable | Boolean | false | 允许点按未禁用步骤 | 流程跳转 | | customClass/customStyle | String / String \| Object | ''/'' | 根节点样式定制 | 样式覆盖 |

items 每项支持的字段

字段	类型	默认值	说明
title/desc/name	String	''	标题、说明、唯一键
status	String	自动推断	wait/process/finish/error
mode/icon	String	继承组件	节点模式和图标名
disabled	Boolean	false	禁止点击

---

事件

事件名称	触发时机	回调参数	参数说明
click/step-click	clickable 且项未禁用时	({ item, index })	标准化步骤与索引

---

插槽

插槽名	作用	作用域参数	说明
icon	自定义步骤节点	{ item, index }	替换编号、图标或圆点节点
title	自定义步骤标题	{ item, index }	替换 item.title
desc	自定义步骤说明	{ item, index }	替换 item.desc

主题说明

• 节点尺寸由 --xtf-steps-node-size，连接线由 --xtf-steps-line-thickness 控制。
• 状态色使用 --xtf-steps-process-border、--xtf-steps-finish-line、--xtf-steps-error-border 等主题变量。 如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖上述 CSS 变量。