Step 步骤条

说明

简易的水平步骤条组件，一般用于某些分步操作

用法示例

基础用法

通过 steps 可以定义每步的名称；如果不需要名称，则使用 stepNumber 定义步骤数量即可

1

步骤1

2

步骤2

3

步骤3

1

2

3

<template>
  <y-step :steps="steps" :active-index="1" />

  <el-divider />

  <y-step :step-number="3" :active-index="2" />
</template>

<script setup>
import { ref } from 'vue'
const steps = ref(['步骤1', '步骤2', '步骤3'])
</script>

隐藏源码

自定义样式

通过css变量可以自定义组件中部分样式

1

步骤1

2

步骤2

3

步骤3

<template>
  <y-step
    :style="{ '--step-height': '100px', '--line-width': '3px', '--active-color': 'red', '--active-text-color': 'blue' }"
    :steps="steps" :active-index="1" />
</template>

<script setup>
import { ref } from 'vue'
const steps = ref(['步骤1', '步骤2', '步骤3'])
</script>

隐藏源码

插槽

通过插槽可以自定义步骤条节点样式，不包含连接线

步骤1

步骤2

步骤3

<template>
  <y-step :steps="steps" :active-index="1">
    <template #default="{ step, index, active }">
      <div :style="{ color: active ? 'red' : '' }">
        <span>{{ step }}</span>
      </div>
    </template>
  </y-step>
</template>

<script setup>
import { ref } from 'vue'
const steps = ref(['步骤1', '步骤2', '步骤3'])
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
options	步骤选项数组，用于显示步骤标签	array	[]
step-number	步骤数量，当options为空时使用此属性生成步骤数，不小于2	number	2
active-index	当前激活步骤的索引	number	0
inline-label	标签是否与步骤序号同行显示	boolean	true

Slots

名称	说明	参数
default	每个step的插槽，不包含连接线	object

CSS Variables

变量名	说明	默认值
--step-height	组件高度	'64px'
--line-width	连接线宽度	'1px'
--active-color	active状态时的颜色	--el-color-primary
--active-text-color	active状态时的文本颜色	--el-color-primary