Steps
Demos
Size and direction variants
Available style variants for the ui
prop: s
/ m
/ vertical
/ label-vertical
.
3
Step 3
注册成功
<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>
Step status
Set status
property of the step
to error
, if the step fails.
Current step
3
Step 3
注册成功
<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
Props
Name | Type | Default | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
ui | string= | - | Style variants.
| ||||||||||
steps | Array | - | The datasource of steps with item type being | ||||||||||
current | number | - | The index of current step. |
Slots
Name | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
default | The content of each step. Displays the step index/completed icon, label and description by default.
Additionally, custom properties in current step, apart from the listed ones, will also be passes into the slot props object via | ||||||||||||||||||
index | The step index. Displays an index value starts from 1 , a success icon for finished steps by default and an error icon for error steps. Resides inside the default slot and share the same slot props. | ||||||||||||||||||
label | The step label. Displays the label property by default. Resides inside the default slot and share the same slot props. | ||||||||||||||||||
desc | The step description. Displays the desc property by default. Resides inside the default slot and share the same slot props. |
Events
Name | Description |
---|---|
click | Triggered when any step is clicked. The callback parameter type is (index: number, event: Event) , where index is the index of the clicked step and event is the corresponding native event object. |
Icons
Name | Description |
---|---|
success | Steps finished successfully. |
error | Steps with error. |