steps.md
1.4 KB
Steps 步骤条
参考 Mand Mobile - Steps
a4a85439be8526638d0ddc8bf1d103dd971276d7/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>
:::
a4a85439be8526638d0ddc8bf1d103dd971276d7/examples/views/docs/component/steps.md#">纵向展示
::: snippet 设置direction为vertical
<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