Steps 步骤

示例

Current step

Options

<template>
<article>
  <section>
    <h4>Current step</h4>
    <veui-number-input
      v-model="current"
      :min="1"
      :max="steps.length"
      :step="1"
    />
  </section>
  <section>
    <h4>Options</h4>
    <veui-checkbox v-model="full">
      Full
    </veui-checkbox>
    <veui-checkbox v-model="small">
      Small
    </veui-checkbox>
    <veui-checkbox v-model="vertical">
      Verticle
    </veui-checkbox>
  </section>
  <section>
    <veui-steps
      :ui="ui"
      :steps="steps"
      :current="current - 1"
    />
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-steps': Steps,
    'veui-number-input': NumberInput,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      current: 1,
      full: false,
      small: false,
      vertical: false,
      steps: [
        { label: 'Step 1', desc: '填写信息' },
        { label: 'Step 2', desc: '验证身份' },
        { label: 'Step 3', desc: '注册成功' }
      ]
    }
  },
  computed: {
    ui () {
      return [
        ...(this.full ? ['full'] : []),
        ...(this.vertical ? ['vertical'] : []),
        ...(this.small ? ['small'] : [])
      ].join(' ')
    }
  }
}
</script>

API

属性

名称类型默认值描述
uistring-

预设样式。

描述
full完整样式。
small小尺寸样式。
vertical纵向样式。
stepsArray-

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

名称类型
labelstring步骤标题。
descstring步骤描述。
tostring|Object步骤链接。类型见 Link 组件的同名属性。
currentnumber-当前步骤的索引值。

插槽

名称描述
default

整个步骤项内容。

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

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

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

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

图标

名称描述
success已成功完成的步骤。