Steps 步骤条

用于引导用户按照流程完成任务的导航条，显示当前所在步骤

引入

import { Steps } from 'mand-mobile-next'

Vue.createApp().component(Steps.name, Steps)

代码演示

API

Steps Props

属性	说明	类型	默认值	备注
steps	步骤信息数组	Array<StepOptions>
current	当前步骤/进度	Number	`0`	支持小数
direction	展示方向	String	`horizontal`	`horizontal`, `vertical`
transition	进度变化动效	Boolean	`false`
dislocation	步骤文案位置自动交错排列	Boolean	`false`	仅支持水平方向展示时
adaptive	步骤高度自适应	Boolean	`false`	仅用于`vertical`, 如果设置为`true`则根据容器高度自适应，需设置`.mfe-steps`高度

StepOptions

属性	说明	类型	默认值	备注
name	步骤标题	String
desc	步骤描述	String
flex	步骤空间占比	Number	1
alignItems	步骤图标和连接线的对齐方式	String	center	flex-start/center/flex-end
textPosition	步骤文本位置	String	bottom	top/bottom，仅支持水平方向展示时
textAlign	步骤文本的对齐方式	String	center	left/center/right，仅支持水平方向展示时
iconSize	步骤图标最小尺寸	Number	32	单位px
barSize	连接线尺寸	Number	2	单位px
barText	连接线文案	String

Steps Slots

icon

统一自定义所有步骤图标，支持scoped slot如下所示：

<template slot="reached" slot-scope="{ index, currentIndex }">
  <b v-if="props.index === props.currentIndex">{{ props.index }}</b>
  <span v-else>{{ props.index }}</span>
</template>

reached

已完成步骤图标插槽，用于自定义已完成步骤图标，支持scoped slot如下所示：

<template slot="reached" slot-scope="{ index }">
  <!-- 如果索引值为1，则自定义 -->
  <md-icon name="checked" v-if="index === 1"></md-icon>
  <!-- 默认步骤图标 -->
  <div class="step-node-default" v-else></div>
</template>

current

当前步骤图标插槽，用于自定义当前步骤图标，支持scoped slot用法同reached

unreached

未完成步骤图标插槽，用于自定义未完成步骤图标，支持scoped slot用法同reached

content

步骤内容插槽

<template
  slot="content"
  slot-scope="{ index, step }"
>
  <!-- index 步骤索引 -->
  <!-- step 步骤信息 -->
</template>

步进器

轮播

# Steps 步骤条

# 引入

# 代码演示

# API

# Steps Props

# StepOptions

# Steps Slots

# icon

# reached

# current

# unreached

# content