steps.md 1.4 KB

Steps 步骤条

参考 Mand Mobile - Steps

8616363c24e6daa80f6651da775ec8510db0f300/examples/views/docs/component/steps.md#">基础用法

::: snippet 设置steps步骤

<template>
  <div>
    <zui-steps :steps="steps"></zui-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        { name: '登录/注册' },
        { name: '申请征信报告' },
        { name: '提取征信报告' },
      ],
    }
  } 
}
</script>

:::

8616363c24e6daa80f6651da775ec8510db0f300/examples/views/docs/component/steps.md#">纵向展示

::: snippet 设置directionvertical

<template>
  <div style="width: 400px;">
    <zui-steps :steps="steps" direction="vertical"></zui-steps>
  </div>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        { name: '登录', text: '这是登录的描述' },
        { name: '开通', text: '这是开通的描述' },
        { name: '验证', text: '这是验证的描述' },
        { name: '成功', text: '这是成功的描述' },
      ],
    }
  } 
}
</script>

:::

API

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- steps | 步骤信息数组 | Array | - | - current | 当前步骤/进度 | Number | 支持小数 | 0 direction | 展示方向 | String | horizontal, vertical | horizontal transition | 进度变化动效 | Boolean | - | false vertical-adaptive | 步骤高度自适应 | Boolean | - | false