VEUI

VEUI on GitHub
Play!EnglishEN
⌘ K | 全文搜索…

Steps 步骤

示例

样式

可供选用的 ui 属性值：s / m / dot / vertical / label-vertical。

stateless 属性可用于切换到纯展示的无状态样式。

1
Step 1
填写信息
2
Step 2
验证身份
3
Step 3
注册成功

dot 样式需要搭配 label-vertical 或 vertical 布局使用。

在 GitHub 上编辑此示例编辑
<template>
<article>
  <section class="settings">
    <veui-label>
      Current step    <veui-number-input
        v-model="current"
        ui="s"
        :min="1"
        :max="steps.length"
        :step="1"
      />
    </veui-label>
    <veui-radio-button-group
      v-model="style"
      ui="s"
      :items="styles"
    />
    <veui-radio-button-group
      v-model="size"
      ui="s"
      :items="sizes"
    />
    <veui-radio-button-group
      v-model="direction"
      ui="s"
      :items="directions"
    />
    <veui-checkbox
      v-model="stateless"
      ui="s"
    >
      Stateless
    </veui-checkbox>
  </section>
  <section>
    <veui-steps
      :ui="ui"
      :steps="steps"
      :current="current - 1"
      :stateless="stateless"
    />
  </section>
</article>
</template>

<script>
import { Steps, Label, NumberInput, RadioButtonGroup, Checkbox } from 'veui'

export default {
  components: {
    'veui-steps': Steps,
    'veui-label': Label,
    'veui-number-input': NumberInput,
    'veui-radio-button-group': RadioButtonGroup,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      current: 1,
      size: 'm',
      direction: '',
      style: 'normal',
      sizes: [
        {
          label: 's',
          value: 's'
        },
        {
          label: 'm',
          value: 'm'
        }
      ],
      stateless: false,
      directions: [
        {
          label: 'vertical',
          value: 'vertical'
        },
        {
          label: 'label-vertical',
          value: 'label-vertical'
        },
        {
          label: 'default',
          value: ''
        }
      ],
      styles: [
        {
          label: 'normal',
          value: 'normal'
        },
        {
          label: 'dot',
          value: 'dot'
        }
      ],
      steps: [
        { label: 'Step 1', desc: '填写信息' },
        { label: 'Step 2', desc: '验证身份' },
        { label: 'Step 3', desc: '注册成功' }
      ]
    }
  },
  computed: {
    ui () {
      return [
        this.style,
        this.size,
        this.style === 'dot' && this.direction === ''
          ? 'label-vertical'
          : this.direction
      ].join(' ')
    }
  }
}
</script>

<style lang="less" scoped>
.settings {
  display: flex;
  margin-bottom: 32px;
  gap: 16px;
  align-items: center;
}
</style>

步骤状态

可以通过设置 steps 属性数据项的 status 自动值定义步骤状态，若步骤出错，可设置为 error。

Current step

Step 1
填写信息
Step 2
验证身份
3
Step 3
注册成功
在 GitHub 上编辑此示例编辑
<template>
<article>
  <section>
    <h4>Current step</h4>
    <veui-number-input
      v-model="current"
      :min="1"
      :max="steps.length"
      :step="1"
    />
  </section>
  <section>
    <veui-steps
      :steps="steps"
      :current="current - 1"
    />
  </section>
</article>
</template>

<script>
import { Steps, NumberInput } from 'veui'

export default {
  components: {
    'veui-steps': Steps,
    'veui-number-input': NumberInput
  },
  data () {
    return {
      current: 2,
      steps: [
        { label: 'Step 1', desc: '填写信息' },
        { label: 'Step 2', desc: '验证身份', status: 'error' },
        { label: 'Step 3', desc: '注册成功' }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin: 0 0 10px;
}

section {
  margin-bottom: 10px;
}

section + section {
  margin-top: 20px;
}
</style>

API

属性

名称类型默认值描述
uistring-

预设样式。

值描述
s小尺寸样式。
m中尺寸样式。
dot圆点样式。
vertical纵向样式。
label-vertical文案纵向样式。
stepsArray-

步骤数据源。类型为 { label, desc, to, status }。

名称类型
labelstring步骤标题。
descstring步骤描述。
tostring | Object步骤链接。类型见 Link 组件的 to 属性。
statusstring步骤状态。可选值为默认和 error。
currentnumber-当前步骤的索引值。
statelessbooleanfalse是否启用无状态纯展示样式。

插槽

名称描述
default

整个步骤项内容。

默认内容：序号/完成图标、步骤标题、描述等内容。

名称类型描述
labelstring步骤标题。同 steps 属性中项目的 label 字段。
descstring步骤描述。同 steps 属性中项目的 desc 字段。
tostring | Object步骤链接。同 steps 属性中项目的 to 字段。
statusstring步骤状态。同 steps 属性中项目的 status 字段。
indexnumber步骤索引值。

另外，steps 内数据项中除了上面描述的字段之外的其它字段也会自动通过 v-bind 进行绑定到插槽参数上。

index序号部分内容，默认显示从 1 开始的序号，已完成的步骤显示完成图标，出错的步骤显示出错图标。位于 default 插槽内部，插槽参数同 default 插槽。
label步骤标题部分内容，默认显示 steps 中项目的 label 字段。位于 default 插槽内部，插槽参数同 default 插槽。
desc步骤描述部分内容，默认显示 steps 中项目的 desc 字段。位于 default 插槽内部，插槽参数同 default 插槽。

事件

名称描述
click任意步骤被点击后触发，回调参数为 (index: number, event: Event)。其中 index 为被点击步骤的索引值，event 为相应的原生事件对象。

图标

名称描述
success已成功完成的步骤。
error出错的步骤。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024