Fusions

Appearance

Steps 步骤条 ​

iPhone

该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 current 属性标识目前处于第几步，从 0 开始
  • fu-steps 要配合 fu-steps-item 组件使用
html
<template>
    <fu-steps :current="current">
        <fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list" :key="index"></fu-steps-item>
    </fu-steps>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const current = ref(0)
    const list = reactive([
        { name: '步骤一', desc: '15:25' },
        { name: '步骤二', desc: '15:25' },
        { name: '步骤三', desc: '15:25' },
        { name: '步骤四', desc: '15:25' }
    ]);
</script>

自定义颜色 ​

  • 通过 activeColor 属性设置步骤条激活状态颜色
  • 通过 inactiveColor 属性设置步骤条未激活状态颜色
html
<template>
    <fu-steps :current="current" activeColor="#ffaa00" inactiveColor="#999999">
        <fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list" :key="index"></fu-steps-item>
    </fu-steps>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const current = ref(0)
    const list = reactive([
        { name: '步骤一', desc: '15:25' },
        { name: '步骤二', desc: '15:25' },
        { name: '步骤三', desc: '15:25' },
        { name: '步骤四', desc: '15:25' }
    ]);
</script>

设置竖向步骤条 ​

  • 通过 direction 属性设置 column 步骤条方向为竖向
html
<template>
    <fu-steps :current="current" direction="column">
        <fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list" :key="index"></fu-steps-item>
    </fu-steps>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const current = ref(0)
    const list = reactive([
        { name: '步骤一', desc: '15:25' },
        { name: '步骤二', desc: '15:25' },
        { name: '步骤三', desc: '15:25' },
        { name: '步骤四', desc: '15:25' }
    ]);
</script>

设置步骤条模式 ​

  • 通过 dot 属性设置步骤条点模式，可选值为 true 和 false
html
<template>
    <fu-steps :current="current" dot>
        <fu-steps-item :title="item.name" :desc="item.desc" v-for="(item,index) in list" :key="index"></fu-steps-item>
    </fu-steps>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const current = ref(0)
    const list = reactive([
        { name: '步骤一', desc: '15:25' },
        { name: '步骤二', desc: '15:25' },
        { name: '步骤三', desc: '15:25' },
        { name: '步骤四', desc: '15:25' }
    ]);
</script>

API ​

Steps Props ​

属性名说明类型默认值可选值
direction排列方向Stringrowcolumn
current设置当前处于第几步String｜Number0-
activeColor激活状态颜色String#2979ff-
inactiveColor未激活状态颜色String#969799-
dot是否显示点模式Booleanfalsetrue

Steps Slots ​

插槽名说明
default步骤条步骤

StepsItem Props ​

属性名说明类型默认值可选值
title标题String--
desc描述String--
iconSize图标大小String｜Number17-
error当前步骤是否处于失败状态Booleanfalse-

StepsItem Slots ​

插槽名说明
icon自定义图标内容
title自定义标题内容
desc自定义描述内容