Carol UI

Steps 步骤条

演示

提交订单2023-08-08

支付订单2023-08-08

取消订单2023-08-08

简单的步骤条

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置 space 属性即可，它接受 Number，单位为 px，如果不设置，则为自适应。设置 finish-status 属性可以改变已经完成的步骤的状态。

<template>
  <div>
    <cl-steps :active="active" :space="'85px'" style="overflow-x: auto; margin-bottom: 12px">
      <cl-step
        v-for="(item, index) in steps"
        :key="index"
        :title="item.title"
        :description="item.description"
      />
    </cl-steps>
    <cl-button @click="nextStep">下一步</cl-button>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
let steps = reactive([
  { title: '提交订单', description: '2023-08-08' },
  { title: '支付订单', description: '2023-08-08' },
  { title: '取消订单', description: '2023-08-08' }
])
let active = ref(0)
const nextStep = () => {
  if (active.value < steps.length) {
    active.value++
  }
}
</script>

<style></style>

提交订单2023-08-08

支付订单2023-08-08

取消订单2023-08-08

居中的步骤条

标题和描述可以居中。

<template>
  <div>
    <cl-steps :active="active" :space="'85px'" align-center style="overflow-x: auto">
      <cl-step
        v-for="(item, index) in steps"
        :key="index"
        :title="item.title"
        :description="item.description"
      />
    </cl-steps>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const steps = [
  { title: '提交订单', description: '2023-08-08' },
  { title: '支付订单', description: '2023-08-08' },
  { title: '取消订单', description: '2023-08-08' }
]
let active = ref(2)
</script>

<style></style>

提交订单2023-08-08

支付订单2023-08-08

自定义title自定义description

自定义步骤条

标题，描述，icon均可以插槽的方式自定义

<template>
  <div>
    <cl-steps :active="active" :space="'85px'" style="overflow-x: auto; margin-bottom: 12px">
      <cl-step
        v-for="(item, index) in steps"
        :key="index"
        :title="item.title"
        :description="item.description"
        :status="item.status"
      >
        <template #title v-if="index === 2">自定义title</template>
        <template #description v-if="index === 2">自定义description</template>
        <template #icon v-if="index === 2">
          <cl-icon iconName="cl-icon-yonghu"></cl-icon>
        </template>
      </cl-step>
    </cl-steps>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const steps = [
  { title: '提交订单', description: '2023-08-08', status: 'wait' },
  { title: '支付订单', description: '2023-08-08' },
  { title: '取消订单', description: '2023-08-08' }
]
let active = ref(2)
</script>

<style></style>

API

Steps Props

参数	描述	类型	可选值	默认值
space	步骤条宽度	string	-	200px
active	设置当前激活步骤	number	-	-1
process-status	设置当前步骤的状态	string	wait / process / finish	200px
finish-status	设置结束步骤的状态	string	wait / process / finish	200px
space	步骤条宽度	string	-	200px
align-center	进行居中对齐	boolean	-	false

Step Props

参数	描述	类型	可选值	默认值
title	标题	string	-	-
description	描述性文字	string	-	-
status	设置当前步骤的状态	string	wait / process / finish	-
space	步骤条宽度	string	-	200px

Steps 步骤条 ​

演示 ​

API ​

Steps 步骤条

演示

API