BIN-UI-DESIGN

Appearance

On this page

步骤 Steps ​

提示某个任务的步骤

基础用法 ​

基本用法，组件会根据current自动判断各步骤状态。

已完成
这里是该步骤的描述信息
进行中
这里是该步骤的描述信息
待进行
这里是该步骤的描述信息
待进行
这里是该步骤的描述信息
<template>
  <div>
    <b-steps :current="current">
      <b-step title="已完成" content="这里是该步骤的描述信息"></b-step>
      <b-step title="进行中" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>
<template>
  <div>
    <b-steps :current="current">
      <b-step title="已完成" content="这里是该步骤的描述信息"></b-step>
      <b-step title="进行中" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

小型步骤条 ​

设置 size="small"开启显示小型步骤条

已完成
进行中
待进行
待进行
<template>
  <div>
    <b-steps :current="current" size="small">
      <b-step title="已完成"></b-step>
      <b-step title="进行中"></b-step>
      <b-step title="待进行"></b-step>
      <b-step title="待进行"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>
<template>
  <div>
    <b-steps :current="current" size="small">
      <b-step title="已完成"></b-step>
      <b-step title="进行中"></b-step>
      <b-step title="待进行"></b-step>
      <b-step title="待进行"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

自定义图标 ​

设置 icon自定义设置图标

已完成
进行中
待进行
<template>
  <div>
    <b-steps :current="current">
      <b-step title="已完成" icon="sketch"></b-step>
      <b-step title="进行中" icon="block"></b-step>
      <b-step title="待进行" icon="Gitlab"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 2) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>
<template>
  <div>
    <b-steps :current="current">
      <b-step title="已完成" icon="sketch"></b-step>
      <b-step title="进行中" icon="block"></b-step>
      <b-step title="待进行" icon="Gitlab"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 2) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

竖型步骤 ​

设置direction="vertical"可以开启竖向的步骤

已完成
这里是该步骤的描述信息
进行中
这里是该步骤的描述信息
待进行
这里是该步骤的描述信息
待进行
这里是该步骤的描述信息
<template>
  <div>
    <b-steps :current="current" direction="vertical">
      <b-step title="已完成" content="这里是该步骤的描述信息"></b-step>
      <b-step title="进行中" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>
<template>
  <div>
    <b-steps :current="current" direction="vertical">
      <b-step title="已完成" content="这里是该步骤的描述信息"></b-step>
      <b-step title="进行中" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
    </b-steps>
    <b-button type="primary" @click="next">下一步</b-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const current = ref(0)

function next() {
  if (current.value === 3) {
    current.value = 0
  } else {
    current.value += 1
  }
}
</script>

设置状态 ​

基本用法，组件会根据current自动判断各步骤状态。

已完成
这里是该步骤的描述信息
进行中
这里是该步骤的描述信息
待进行
这里是该步骤的描述信息
待进行
这里是该步骤的描述信息
<template>
  <div>
    <b-steps :current="2" status="error">
      <b-step title="已完成" content="这里是该步骤的描述信息"></b-step>
      <b-step title="进行中" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
    </b-steps>
  </div>
</template>

<script setup lang="ts"></script>
<template>
  <div>
    <b-steps :current="2" status="error">
      <b-step title="已完成" content="这里是该步骤的描述信息"></b-step>
      <b-step title="进行中" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
      <b-step title="待进行" content="这里是该步骤的描述信息"></b-step>
    </b-steps>
  </div>
</template>

<script setup lang="ts"></script>

Steps Props ​

参数说明类型可选值默认值
current当前步骤Number—0
status当前步骤的状态Stringwait、process、finish、error、successprocess
size大小Stringsmall—
direction方向Stringhorizontal（水平）或vertical（垂直）horizontal

Step Props ​

参数说明类型可选值默认值
title标题String——
status当前步骤的状态Stringwait、process、finish、error、successprocess
content详细内容(可选)String——
icon自定义图标String——

Step Slot ​

事件名说明
title标题
content详细内容
icon自定义图标

MIT Licensed | Copyright © 2023-present bin-ui-design