Step 步骤条

介绍

步骤条用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置。

导入

import Step from '@/components/display/Step.vue'
import StepItem from '@/components/display/StepItem.vue'

使用方法

基础用法

步骤条的基础用法，通过 v-model:activeIndex 来控制当前激活的步骤。

<template>
  <Step v-model:activeIndex="activeIndex">
    <StepItem text="步骤1" />
    <StepItem text="步骤2" />
    <StepItem text="步骤3" />
    <StepItem text="步骤4" />
    <StepItem text="步骤5" />
    <StepItem text="步骤6" />
    <StepItem text="步骤7" />
    <StepItem text="步骤8" />
  </Step>
  <FlexRow :margin="20">
    <Button @click="activeIndex = Math.max(0, activeIndex - 1)">上一步</Button>
    <Button type="primary" @click="activeIndex = Math.min(9, activeIndex + 1)">下一步</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Step from '@/components/display/Step.vue';
import StepItem from '@/components/display/StepItem.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';

const activeIndex = ref(0);
</script>

自定义颜色与图标

可以通过 activeColor、activeIcon、inactiveIcon 和 finishIcon 等属性设置各个状态下的图标和颜色。

<template>
  <Step
    activeColor="danger"
    v-model:activeIndex="activeIndex3"
  >
    <StepItem text="步骤1" />
    <StepItem text="步骤2" activeIcon="prompt" />
    <StepItem text="步骤3" inactiveIcon="history" />
    <StepItem text="步骤4" activeIcon="history" finishIcon="film" />
  </Step>
  <FlexRow :margin="20">
    <Button @click="activeIndex3 = Math.max(0, activeIndex3 - 1)">上一步</Button>
    <Button type="primary" @click="activeIndex3 = Math.min(5, activeIndex3 + 1)">下一步</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Step from '@/components/display/Step.vue';
import StepItem from '@/components/display/StepItem.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';

const activeIndex3 = ref(0);
</script>

竖向步骤

可以通过设置 direction 属性来改变步骤条的显示方向为竖向。

<template>
  <Step direction="vertical" v-model:activeIndex="activeIndex2">
    <StepItem text="物流状态1 2016-07-12 12:40" />
    <StepItem text="物流状态2" extra="2016-07-12 10:40" />
    <StepItem text="物流状态3" extra="2016-07-10 16:00" />
    <StepItem text="快件已发货" />
  </Step>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Step from '@/components/display/Step.vue';
import StepItem from '@/components/display/StepItem.vue';

const activeIndex2 = ref(2);
</script>

API 参考

Step

步骤条组件容器，用于包裹多个 StepItem 组件。

Props

名称	说明	类型	必填	默认值
direction	步骤条的方向	'vertical' | 'horizontal'	-	'horizontal'
activeColor	激活时的颜色	string	-	'primary'
inactiveColor	未激活时的颜色	string	-	'lightGrey'
textColor	文字颜色	string	-	'text.content'
lineItemWidth	当为水平模式时，条目的宽度	number	-	150
lineOffset	当为水平模式时，分隔线的边距偏移	number	-	25
lineWidth	线段粗细	number	-	2
activeIndex	当前激活的步骤	number	是	-
activeIcon	同 StepItemProps.activeIcon，此项用于所有子条目的设置	string	-	-
inactiveIcon	同 StepItemProps.inactiveIcon，此项用于所有子条目的设置	string	-	-
finishIcon	同 StepItemProps.finishIcon，此项用于所有子条目的设置	string	-	-
iconProps	同 StepItemProps.iconProps，此项用于所有子条目的设置	IconProps	-	-
textStyle	同 StepItemProps.textStyle，此项用于所有子条目的设置	TextStyle	-	-

StepItem

步骤条的单个步骤项，需要嵌套在 Step 组件内使用。

Props

名称	说明	类型	必填	默认值
activeIcon	自定义激活状态图标。为空时尝试使用 inactiveIcon 的值	string	-	''
inactiveIcon	自定义未激活状态图标。有2个特殊值 __default_number 表示一个圆圈中间一个当前步骤的序号；__default_dot 表示一个圆圈	string	-	横向默认是 '__default_number'，竖向默认是 '__default_dot'
finishIcon	自定义已完成步骤对应的底部图标，优先级高于 inactiveIcon	string	-	'success-filling'
iconProps	图标的附加属性	IconProps	-	{ size: 48 }
textStyle	步骤的文字自定义样式	TextStyle	-	-
innerStyle	步骤的自定义样式	ViewStyle	-	-
text	当前步骤的文字	string	-	-
extra	垂直模式下，允许你渲染附加内容	string	-	-

Slots

名称	说明
default	默认插槽，用于显示步骤内容
extra	附加内容插槽，用于显示额外信息

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
StepLineItemWidth	number	150	水平模式时条目的宽度
StepLineOffset	number	25	水平模式时分隔线的边距偏移
StepLineWidth	number	2	线段粗细
StepActiveColor	string	'primary'	激活时的颜色
StepInactiveColor	string	'lightGrey'	未激活时的颜色
StepTextColor	string	'text.content'	文字颜色
StepItemIconDefaultSize	number	48	步骤项图标的默认大小
StepItemActiveIcon	string	''	步骤项激活状态的默认图标
StepItemFinishIcon	string	'success-filling'	步骤项完成状态的默认图标
StepItemMarginVertical	number	10	垂直模式下步骤项的垂直边距
StepItemTextFontSize	number	26	步骤项文字的字体大小
StepItemContentFontSize	number	26	步骤项内容的字体大小
StepItemContentMarginTop	number	6	步骤项内容的上外边距
StepItemContentMarginLeft	number	6	步骤项内容的左外边距