引入组件

局部引入

// parent.vue
const FSteps = defineAsyncComponent(() => import('@/components/formaui/f-steps/f-steps.vue'))

基础用法

items属性：步骤项列表

<f-steps v-model:active-index="activeIndex" :items="items" spacing="180rpx" @step-click="onStepClick" />

import { ref } from 'vue'

const activeIndex = ref(1)
const items = [
  { title: '步骤一', desc: '2020-04-01' },
  { title: '步骤二', desc: '2020-04-01' },
  { title: '步骤三', desc: '2020-04-01' },
  { title: '步骤四', desc: '2020-04-01' }
]

const onStepClick = (detail: { index: number }) => {
  console.log(detail.index)
}

mode属性：步骤类型（默认1）

• 1：默认圆点
• 2：数字步骤

<f-steps v-model:active-index="activeIndex" :mode="2" :items="items" spacing="180rpx" />

direction属性：方向（默认row）

• row：水平
• column：垂直

<f-steps v-model:active-index="activeIndex" direction="column" :items="items" spacing="180rpx" />

activeIndex属性：当前步骤索引（默认-1）

<f-steps v-model:active-index="activeIndex" :items="items" />

activeColor / inactiveColor属性：激活与未激活颜色

<f-steps active-color="#07C160" inactive-color="#CCCCCC" :items="items" />

lineStyle属性：连接线样式（默认solid）

<f-steps line-style="dashed" :items="items" />

插槽

名称	说明
-	-

属性

名称	类型	说明	默认值
v-model:activeIndex	number	当前步骤索引	-1
mode	1 | 2	步骤类型：1 默认 / 2 数字	1
spacing	string	横向步骤项宽度	160rpx
direction	'row' | 'column'	方向	row
activeColor	string	激活状态颜色	主题色
inactiveColor	string	未激活状态颜色	#999999
titleFontSize	string	标题字体大小	28rpx
isTitleBold	boolean	标题是否粗体	false
descFontSize	string	描述字体大小	24rpx
lineStyle	string	连接线样式	solid
items	FStepsItem[]	步骤项列表	[]
titleField	string	标题字段名	title
descField	string	描述字段名	desc
bgColor	string	自定义图标区域背景色	#FFFFFF

FStepsItem

名称	类型	说明
title	string	步骤标题
desc	string	步骤描述
icon	string	字体图标名称（tui-icon）
iconSize	number	字体图标大小（px）
iconPath	string	图片图标地址
activeIconPath	string	已完成步骤图片图标

事件

事件名	说明	回调参数
stepClick	点击步骤时	{ index }

方法

方法名	说明	传入参数
-	-	-