ERP 组件库

Appearance

步骤条 Steps ​

明示任务流程和当前完成程度，引导用户按照步骤完成任务。 ​

基本用法 ​

步骤条的基本用法。

代码事例
vue
<template>
  <div>
    <fk-steps :current="2">
      <fk-step>Succeeded</fk-step>
      <fk-step>Processing</fk-step>
      <fk-step>Pending</fk-step>
    </fk-steps>
    <fk-divider/>
    <div style="line-height: 140px; text-align: center; color: #C9CDD4; ">
      Step 2 Content
    </div>
  </div>
</template>

描述信息 ​

通过设置 description 可以添加描述信息。

代码事例
vue
<template>
  <fk-steps>
    <fk-step description="This is a description">Succeeded</fk-step>
    <fk-step description="This is a description">Processing</fk-step>
    <fk-step description="This is a description">Pending</fk-step>
  </fk-steps>
</template>

标签放置位置 ​

通过设置 label-placement 可以改变标签描述文字放置的位置。放置位置分为 horizontal - 放置在图标右侧（默认）、vertical - 放置在图标下方两种。

代码事例
vue
<template>
  <fk-steps label-placement="vertical">
    <fk-step description="This is a description">Succeeded</fk-step>
    <fk-step description="This is a description">Processing</fk-step>
    <fk-step description="This is a description">Pending</fk-step>
  </fk-steps>
</template>

步骤错误 ​

通过设置 status="error" 来展示错误状态。

代码事例
vue
<template>
  <fk-steps :current="2" status="error">
    <fk-step description="This is a description">Succeeded</fk-step>
    <fk-step description="This is a description">Error</fk-step>
    <fk-step description="This is a description">Pending</fk-step>
  </fk-steps>
</template>

自定义图标 ​

通过 #icon 插槽可以自定义节点图标。

代码事例
vue
<template>
  <fk-steps>
    <fk-step description="This is a description">
      Succeeded
      <template #icon>
        <icon-home/>
      </template>
    </fk-step>
    <fk-step description="This is a description">
      Processing
      <template #icon>
        <icon-loading/>
      </template>
    </fk-step>
    <fk-step description="This is a description">
      Pending
      <template #icon>
        <icon-thumb-up/>
      </template>
    </fk-step>
  </fk-steps>
</template>

隐藏连接线 ​

通过设置 line-less 可以使用无连接线模式。

代码事例
vue
<template>
  <fk-steps :current="2" line-less>
    <fk-step description="This is a description">Succeeded</fk-step>
    <fk-step description="This is a description">Processing</fk-step>
    <fk-step description="This is a description">Pending</fk-step>
  </fk-steps>
</template>

竖直步骤条 ​

竖直方向的步骤条。

代码事例
vue
<template>
  <div class="frame-bg">
    <div class="frame-body">
      <div class="frame-aside">
        <fk-steps :current="current" direction="vertical">
          <fk-step>Succeeded</fk-step>
          <fk-step>Processing</fk-step>
          <fk-step>Pending</fk-step>
        </fk-steps>
      </div>
      <div class="frame-main">
        <div class="main-content">The content of this step.</div>
        <div class="main-bottom">
          <fk-button :disabled="current===1" @click="onPrev">
            <icon-left />
            Back
          </fk-button>
          <fk-button :disabled="current===3" @click="onNext">
            Next
            <icon-right />
          </fk-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const current = ref(1);

    const onPrev = () => {
      current.value = Math.max(1, current.value - 1);
    };

    const onNext = () => {
      current.value = Math.min(3, current.value + 1);
    };

    return {
      current,
      onPrev,
      onNext,
    }
  },
};
</script>

<style scoped lang="less">
.frame-bg {
  max-width: 780px;
  padding: 40px;
  background: var(--color-fill-2);
}

.frame-body {
  display: flex;
  background: var(--color-bg-2);
}

.frame-aside {
  padding: 24px;
  height: 272px;
  border-right: 1px solid var(--color-border);
}

.frame-main {
  width: 100%;
}

.main-content {
  text-align: center;
  line-height: 200px;
}

.main-bottom {
  display: flex;
  justify-content: center;

  button {
    margin: 0 20px;
  }
}
</style>

箭头步骤条 ​

通过设置 type="arrow"，可以使用箭头类型的步骤条。注意：仅支持水平步骤条。

代码事例
vue
<template>
  <fk-space direction="vertical" style="width: 100%;">
    <fk-steps type="arrow" :current="2">
      <fk-step description="This is a description">Succeeded</fk-step>
      <fk-step description="This is a description">Processing</fk-step>
      <fk-step description="This is a description">Pending</fk-step>
    </fk-steps>
    <fk-steps type="arrow" small :current="2">
      <fk-step>Succeeded</fk-step>
      <fk-step>Processing</fk-step>
      <fk-step>Pending</fk-step>
    </fk-steps>
  </fk-space>
</template>

点状步骤条 ​

通过设置 type="dot" ， 可以使用点状的步骤条。此模式没有 small 尺寸。

代码事例
vue
<template>
  <fk-steps type="dot">
    <fk-step>Succeeded</fk-step>
    <fk-step>Processing</fk-step>
    <fk-step>Pending</fk-step>
  </fk-steps>
</template>

导航步骤条 ​

通过设置 type="navigation" 展示导航类型的步骤条。

代码事例
vue
<template>
  <fk-steps type="navigation">
    <fk-step>Succeeded</fk-step>
    <fk-step>Processing</fk-step>
    <fk-step>Pending</fk-step>
  </fk-steps>
</template>

可切换步骤条 ​

设置 changeable 开启点击切换步骤。

代码事例
vue
<template>
  <div>
    <fk-steps changeable :current="current" @change="setCurrent">
      <fk-step description="This is a description">Succeeded</fk-step>
      <fk-step description="This is a description">Processing</fk-step>
      <fk-step description="This is a description">Pending</fk-step>
    </fk-steps>
    <div
:style="{
          width: '100%',
          height: '200px',
          textAlign: 'center',
          background: 'var(--color-bg-2)',
          color: '#C2C7CC',
        }">
      <div style="line-height: 160px;">Step{{current}} Content</div>
      <fk-space size="large">
        <fk-button type="secondary" :disabled="current <= 1" @click="onPrev">
          <IconLeft/> Back
        </fk-button>
        <fk-button type="primary" :disabled="current >= 3" @click="onNext">
          Next <IconRight/>
        </fk-button>
      </fk-space>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 1,
    };
  },
  methods: {
    onPrev() {
      this.current = Math.max(1, this.current - 1)
    },

    onNext() {
      this.current = Math.min(3, this.current + 1)
    },

    setCurrent(current) {
      this.current = current
    }
  }
};
</script>

API ​

<steps> Props ​

参数名描述类型默认值
type步骤条的类型'default' | 'arrow' | 'dot' | 'navigation''default'
direction步骤条的显示方向'horizontal' | 'vertical''horizontal'
label-placement标签描述文字放置的位置'horizontal' | 'vertical''horizontal'
current (v-model)当前步骤数number-
default-current默认的步骤数（非受控状态）number1
status当前步骤的状态'wait' | 'process' | 'finish' | 'error''process'
line-less是否使用无连接线样式booleanfalse
small是否使用小型步骤条booleanfalse
changeable是否可以点击切换booleanfalse

<steps> Events ​

事件名描述参数
change步骤数发生改变时触发step: number
ev: Event

<step> Props ​

参数名描述类型默认值
title步骤的标题string-
description步骤的描述信息string-
status步骤的状态'wait' | 'process' | 'finish' | 'error'-
disabled是否禁用booleanfalse

<step> Slots ​

插槽名描述参数
node节点step: number
status: string
icon图标step: number
status: string
description描述内容-

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team