步骤条

v-stepper 组件用于显示步骤进度。

用例

一个步骤组件适用于多种场景，包括购物车、创建记录等等。

template script

  1. <template>
  2.   <v-stepper v-model="e1">
  3.     <v-stepper-header>
  4.       <v-stepper-step :complete="e1 > 1" step="1">Name of step 1</v-stepper-step>
  6.       <v-divider></v-divider>
  8.       <v-stepper-step :complete="e1 > 2" step="2">Name of step 2</v-stepper-step>
  10.       <v-divider></v-divider>
  12.       <v-stepper-step step="3">Name of step 3</v-stepper-step>
  13.     </v-stepper-header>
  15.     <v-stepper-items>
  16.       <v-stepper-content step="1">
  17.         <v-card
  18.           class="mb-12"
  19.           color="grey lighten-1"
  20.           height="200px"
  21.         ></v-card>
  23.         <v-btn
  24.           color="primary"
  25.           @click="e1 = 2"
  26.         >
  27.           Continue
  28.         </v-btn>
  30.         <v-btn text>Cancel</v-btn>
  31.       </v-stepper-content>
  33.       <v-stepper-content step="2">
  34.         <v-card
  35.           class="mb-12"
  36.           color="grey lighten-1"
  37.           height="200px"
  38.         ></v-card>
  40.         <v-btn
  41.           color="primary"
  42.           @click="e1 = 3"
  43.         >
  44.           Continue
  45.         </v-btn>
  47.         <v-btn text>Cancel</v-btn>
  48.       </v-stepper-content>
  50.       <v-stepper-content step="3">
  51.         <v-card
  52.           class="mb-12"
  53.           color="grey lighten-1"
  54.           height="200px"
  55.         ></v-card>
  57.         <v-btn
  58.           color="primary"
  59.           @click="e1 = 1"
  60.         >
  61.           Continue
  62.         </v-btn>
  64.         <v-btn text>Cancel</v-btn>
  65.       </v-stepper-content>
  66.     </v-stepper-items>
  67.   </v-stepper>
  68. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e1: 1,
  6.       }
  7.     },
  8.   }
  9. </script>

Steppers（步骤条） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Steppers（步骤条） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-row justify="space-around">
  4.       <v-col cols="12">
  5.         <v-slider v-model="steps" label="Steps" min="2" max="20"></v-slider>
  6.       </v-col>
  7.       <v-switch v-model="vertical" label="Vertical"></v-switch>
  8.       <v-switch v-model="altLabels" label="altLabels"></v-switch>
  9.       <v-switch v-model="editable" label="Editable"></v-switch>
  10.     </v-row>
  11.     <v-stepper
  12.       v-model="e1"
  13.       :vertical="vertical"
  14.       :alt-labels="altLabels"
  15.     >
  16.       <template v-if="vertical">
  17.         <template v-for="n in steps">
  18.           <v-stepper-step
  19.             :key="`${n}-step`"
  20.             :complete="e1 > n"
  21.             :step="n"
  22.             :editable="editable"
  23.           >
  24.             Step {{ n }}
  25.           </v-stepper-step>
  27.           <v-stepper-content
  28.             :key="`${n}-content`"
  29.             :step="n"
  30.           >
  31.             <v-card
  32.               class="mb-12"
  33.               color="grey lighten-1"
  34.               height="200px"
  35.             ></v-card>
  37.             <v-btn
  38.               color="primary"
  39.               @click="nextStep(n)"
  40.             >
  41.               Continue
  42.             </v-btn>
  44.             <v-btn text>Cancel</v-btn>
  45.           </v-stepper-content>
  46.         </template>
  47.       </template>
  48.       <template v-else>
  49.         <v-stepper-header>
  50.           <template v-for="n in steps">
  51.             <v-stepper-step
  52.               :key="`${n}-step`"
  53.               :complete="e1 > n"
  54.               :step="n"
  55.               :editable="editable"
  56.             >
  57.               Step {{ n }}
  58.             </v-stepper-step>
  60.             <v-divider
  61.               v-if="n !== steps"
  62.               :key="n"
  63.             ></v-divider>
  64.           </template>
  65.         </v-stepper-header>
  67.         <v-stepper-items>
  68.           <v-stepper-content
  69.             v-for="n in steps"
  70.             :key="`${n}-content`"
  71.             :step="n"
  72.           >
  73.             <v-card
  74.               class="mb-12"
  75.               color="grey lighten-1"
  76.               height="200px"
  77.             ></v-card>
  79.             <v-btn
  80.               color="primary"
  81.               @click="nextStep(n)"
  82.             >
  83.               Continue
  84.             </v-btn>
  86.             <v-btn text>Cancel</v-btn>
  87.           </v-stepper-content>
  88.         </v-stepper-items>
  89.       </template>
  90.     </v-stepper>
  91.   </div>
  92. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e1: 1,
  6.         steps: 2,
  7.         vertical: false,
  8.         altLabels: false,
  9.         editable: true,
  10.       }
  11.     },
  13.     watch: {
  14.       steps (val) {
  15.         if (this.e1 > val) {
  16.           this.e1 = val
  17.         }
  18.       },
  19.       vertical () {
  20.         this.e1 = 2
  21.         requestAnimationFrame(() => this.e1 = 1) // Workarounds
  22.       },
  23.     },
  25.     methods: {
  26.       onInput (val) {
  27.         this.steps = parseInt(val)
  28.       },
  29.       nextStep (n) {
  30.         if (n === this.steps) {
  31.           this.e1 = 1
  32.         } else {
  33.           this.e1 = n + 1
  34.         }
  35.       },
  36.     },
  37.   }
  38. </script>

Steppers（步骤条） - 图3

示例

下面是一些简单到复杂的例子。

可编辑步骤

用户随时可以选择可编辑的步骤并将跳转到该步。

template

  1. <template>
  2.   <v-stepper>
  3.     <v-stepper-header>
  4.       <v-stepper-step
  5.         complete
  6.         editable
  7.         step="1"
  8.       >
  9.         Select campaign settings
  10.       </v-stepper-step>
  12.       <v-divider></v-divider>
  14.       <v-stepper-step
  15.         complete
  16.         step="2"
  17.       >Create an ad group</v-stepper-step>
  19.       <v-divider></v-divider>
  21.       <v-stepper-step
  22.         step="3"
  23.         editable
  24.       >
  25.         Create an ad
  26.       </v-stepper-step>
  27.     </v-stepper-header>
  28.   </v-stepper>
  29. </template>

Steppers（步骤条） - 图4

不可编辑步骤

不可编辑步骤（Non-editable steps）强制用户在整个流程中进行线性处理。

template

  1. <template>
  2.   <v-stepper value="2">
  3.     <v-stepper-header>
  4.       <v-stepper-step step="1" complete>Select campaign settings</v-stepper-step>
  6.       <v-divider></v-divider>
  8.       <v-stepper-step step="2">Create an ad group</v-stepper-step>
  10.       <v-divider></v-divider>
  12.       <v-stepper-step step="3">Create an ad</v-stepper-step>
  13.     </v-stepper-header>
  14.   </v-stepper>
  15. </template>

Steppers（步骤条） - 图5

可选步骤

可选步骤可由子文本调出。

template

  1. <template>
  2.   <div>
  3.     <v-stepper value="1">
  4.       <v-stepper-header>
  5.         <v-stepper-step step="1">Select campaign settings</v-stepper-step>
  7.         <v-divider></v-divider>
  9.         <v-stepper-step step="2">
  10.           Create an ad group
  11.           <small>Optional</small>
  12.         </v-stepper-step>
  14.         <v-divider></v-divider>
  16.         <v-stepper-step step="3">Create an ad</v-stepper-step>
  17.       </v-stepper-header>
  18.     </v-stepper>
  20.     <v-stepper value="2" class="mt-12">
  21.       <v-stepper-header>
  22.         <v-stepper-step step="1" complete>Select campaign settings</v-stepper-step>
  24.         <v-divider></v-divider>
  26.         <v-stepper-step step="2">
  27.           Create an ad group
  28.           <small>Optional</small>
  29.         </v-stepper-step>
  31.         <v-divider></v-divider>
  33.         <v-stepper-step step="3">Create an ad</v-stepper-step>
  34.       </v-stepper-header>
  35.     </v-stepper>
  36.   </div>
  37. </template>

Steppers（步骤条） - 图6

水平步骤线

水平步骤线通过定义的步骤将用户沿 x轴 移动。

template

  1. <template>
  2.   <v-stepper value="1">
  3.     <v-stepper-header>
  4.       <v-stepper-step step="1">Select campaign settings</v-stepper-step>
  6.       <v-divider></v-divider>
  8.       <v-stepper-step step="2">Create an ad group</v-stepper-step>
  10.       <v-divider></v-divider>
  12.       <v-stepper-step step="3">Create an ad</v-stepper-step>
  13.     </v-stepper-header>
  14.   </v-stepper>
  15. </template>

Steppers（步骤条） - 图7

垂直步骤线

水平步骤线通过定义的步骤将用户沿 y轴 移动。其他地方与水平方向的一致。

template script

  1. <template>
  2.   <v-stepper v-model="e6" vertical>
  3.     <v-stepper-step :complete="e6 > 1" step="1">
  4.       Select an app
  5.       <small>Summarize if needed</small>
  6.     </v-stepper-step>
  8.     <v-stepper-content step="1">
  9.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  10.       <v-btn color="primary" @click="e6 = 2">Continue</v-btn>
  11.       <v-btn text>Cancel</v-btn>
  12.     </v-stepper-content>
  14.     <v-stepper-step :complete="e6 > 2" step="2">Configure analytics for this app</v-stepper-step>
  16.     <v-stepper-content step="2">
  17.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  18.       <v-btn color="primary" @click="e6 = 3">Continue</v-btn>
  19.       <v-btn text>Cancel</v-btn>
  20.     </v-stepper-content>
  22.     <v-stepper-step :complete="e6 > 3" step="3">Select an ad format and name ad unit</v-stepper-step>
  24.     <v-stepper-content step="3">
  25.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  26.       <v-btn color="primary" @click="e6 = 4">Continue</v-btn>
  27.       <v-btn text>Cancel</v-btn>
  28.     </v-stepper-content>
  30.     <v-stepper-step step="4">View setup instructions</v-stepper-step>
  31.     <v-stepper-content step="4">
  32.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  33.       <v-btn color="primary" @click="e6 = 1">Continue</v-btn>
  34.       <v-btn text>Cancel</v-btn>
  35.     </v-stepper-content>
  36.   </v-stepper>
  37. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e6: 1,
  6.       }
  7.     },
  8.   }
  9. </script>

Steppers（步骤条） - 图8

线性步骤

线性步骤始终沿着你定义的路径移动。

template

  1. <template>
  2.   <div>
  3.     <v-stepper>
  4.       <v-stepper-header>
  5.         <v-stepper-step step="1">Select campaign settings</v-stepper-step>
  7.         <v-divider></v-divider>
  9.         <v-stepper-step step="2">Create an ad group</v-stepper-step>
  11.         <v-divider></v-divider>
  13.         <v-stepper-step step="3">Create an ad</v-stepper-step>
  14.       </v-stepper-header>
  15.     </v-stepper>
  17.     <v-stepper value="2" class="mt-12">
  18.       <v-stepper-header>
  19.         <v-stepper-step step="1" complete>Select campaign settings</v-stepper-step>
  21.         <v-divider></v-divider>
  23.         <v-stepper-step step="2">Create an ad group</v-stepper-step>
  25.         <v-divider></v-divider>
  27.         <v-stepper-step step="3">Create an ad</v-stepper-step>
  28.       </v-stepper-header>
  29.     </v-stepper>
  31.     <v-stepper value="3" class="mt-12">
  32.       <v-stepper-header>
  33.         <v-stepper-step step="1" complete>Select campaign settings</v-stepper-step>
  35.         <v-divider></v-divider>
  37.         <v-stepper-step step="2" complete>Create an ad group</v-stepper-step>
  39.         <v-divider></v-divider>
  41.         <v-stepper-step step="3">Create an ad</v-stepper-step>
  42.       </v-stepper-header>
  43.     </v-stepper>
  44.   </div>
  45. </template>

Steppers（步骤条） - 图9

Vuetify Reddit

Connect with developers across the globe on the Vuetify subreddit.

ads by Vuetify

](https://www.reddit.com/r/vuetifyjs/?ref=vuetifyjs.com)

非线性步骤

非线性步骤可以让用户按照自己选择路线在流程中移动。

template

  1. <template>
  2.   <div>
  3.     <v-stepper non-linear>
  4.       <v-stepper-header>
  5.         <v-stepper-step
  6.           editable
  7.           step="1"
  8.         >
  9.           Select campaign settings
  10.         </v-stepper-step>
  12.         <v-divider></v-divider>
  14.         <v-stepper-step
  15.           editable
  16.           step="2"
  17.         >
  18.           Create an ad group
  19.         </v-stepper-step>
  21.         <v-divider></v-divider>
  23.         <v-stepper-step
  24.           step="3"
  25.           editable
  26.         >
  27.           Create an ad
  28.         </v-stepper-step>
  29.       </v-stepper-header>
  30.     </v-stepper>
  32.     <v-stepper
  33.       class="mt-12"
  34.       non-linear
  35.     >
  36.       <v-stepper-header>
  37.         <v-stepper-step
  38.           complete
  39.           editable
  40.           step="1"
  41.         >
  42.           Select campaign settings
  43.         </v-stepper-step>
  45.         <v-divider></v-divider>
  47.         <v-stepper-step
  48.           editable
  49.           step="2"
  50.         >
  51.           Create an ad group
  52.         </v-stepper-step>
  54.         <v-divider></v-divider>
  56.         <v-stepper-step
  57.           complete
  58.           editable
  59.           step="3"
  60.         >
  61.           Create an ad
  62.         </v-stepper-step>
  63.       </v-stepper-header>
  64.     </v-stepper>
  66.     <v-stepper
  67.       class="mt-12"
  68.       non-linear
  69.       value="3"
  70.     >
  71.       <v-stepper-header>
  72.         <v-stepper-step
  73.           complete
  74.           editable
  75.           step="1"
  76.         >
  77.           Select campaign settings
  78.         </v-stepper-step>
  80.         <v-divider></v-divider>
  82.         <v-stepper-step
  83.           complete
  84.           editable
  85.           step="2"
  86.         >
  87.           Create an ad group
  88.         </v-stepper-step>
  90.         <v-divider></v-divider>
  92.         <v-stepper-step
  93.           complete
  94.           editable
  95.           step="3"
  96.         >
  97.           Create an ad
  98.         </v-stepper-step>
  99.       </v-stepper-header>
  100.     </v-stepper>
  101.   </div>
  102. </template>

Steppers（步骤条） - 图10

备用标签

步骤组件也有一个放置在步骤下方的备用标签样式。

template

  1. <template>
  2.   <div>
  3.     <v-stepper alt-labels>
  4.       <v-stepper-header>
  5.         <v-stepper-step step="1">Ad unit details</v-stepper-step>
  7.         <v-divider></v-divider>
  9.         <v-stepper-step step="2">Ad sizes</v-stepper-step>
  11.         <v-divider></v-divider>
  13.         <v-stepper-step step="3">Ad templates</v-stepper-step>
  14.       </v-stepper-header>
  15.     </v-stepper>
  17.     <v-stepper alt-labels class="mt-12">
  18.       <v-stepper-header>
  20.         <v-stepper-step step="1">Ad unit details</v-stepper-step>
  22.         <v-divider></v-divider>
  24.         <v-stepper-step step="2">
  25.           Ad sizes
  26.           <small>Optional</small>
  27.         </v-stepper-step>
  29.         <v-divider></v-divider>
  31.         <v-stepper-step step="3">Ad templates</v-stepper-step>
  32.       </v-stepper-header>
  33.     </v-stepper>
  34.   </div>
  35. </template>

Steppers（步骤条） - 图11

多行表示的错误状态

可以显示错误状态来通知用户必须采取的一些行动。

template

  1. <template>
  2.   <v-stepper>
  3.     <v-stepper-header>
  4.       <v-stepper-step step="1">Ad unit details</v-stepper-step>
  6.       <v-divider></v-divider>
  8.       <v-stepper-step :rules="[() => false]" step="2">
  9.         Ad templates
  10.         <small>Alert message</small>
  11.       </v-stepper-step>
  13.       <v-divider></v-divider>
  15.       <v-stepper-step step="3">Ad sizes</v-stepper-step>
  16.     </v-stepper-header>
  17.   </v-stepper>
  18. </template>

Steppers（步骤条） - 图12

备用标签样式的多行错误状态显示

错误状态的显示同样可以应用于备用标签样式。

template

  1. <template>
  2.   <v-stepper alt-labels>
  3.     <v-stepper-header>
  4.       <v-stepper-step step="3" complete>Ad type</v-stepper-step>
  6.       <v-divider></v-divider>
  8.       <v-stepper-step step="4" complete>Ad style</v-stepper-step>
  10.       <v-divider></v-divider>
  12.       <v-stepper-step :rules="[() => false]" step="5">
  13.         Custom channels
  14.         <small>Alert message</small>
  15.       </v-stepper-step>
  17.       <v-divider></v-divider>
  19.       <v-stepper-step step="6">Get code</v-stepper-step>
  20.     </v-stepper-header>
  21.   </v-stepper>
  22. </template>

Steppers（步骤条） - 图13

垂直的多行错误状态显示

同样的，错误状态也可以应用于垂直的步骤。

template script

  1. <template>
  2.   <v-stepper v-model="e13" vertical>
  3.     <v-stepper-step step="1" complete>
  4.       Name of step 1
  5.     </v-stepper-step>
  7.     <v-stepper-content step="1">
  8.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  9.       <v-btn color="primary" @click="e13 = 2">Continue</v-btn>
  10.       <v-btn text>Cancel</v-btn>
  11.     </v-stepper-content>
  13.     <v-stepper-step step="2" complete>Name of step 2</v-stepper-step>
  15.     <v-stepper-content step="2">
  16.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  17.       <v-btn color="primary" @click="e13 = 3">Continue</v-btn>
  18.       <v-btn text>Cancel</v-btn>
  19.     </v-stepper-content>
  21.     <v-stepper-step :rules="[() => false]" step="3">
  22.       Ad templates
  23.       <small>Alert message</small>
  24.     </v-stepper-step>
  26.     <v-stepper-content step="3">
  27.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  28.       <v-btn color="primary" @click="e13 = 4">Continue</v-btn>
  29.       <v-btn text>Cancel</v-btn>
  30.     </v-stepper-content>
  32.     <v-stepper-step step="4">View setup instructions</v-stepper-step>
  34.     <v-stepper-content step="4">
  35.       <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
  36.       <v-btn color="primary" @click="e13 = 1">Continue</v-btn>
  37.       <v-btn text>Cancel</v-btn>
  38.     </v-stepper-content>
  39.   </v-stepper>
  40. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e13: 2,
  6.       }
  7.     },
  8.   }
  9. </script>

Steppers（步骤条） - 图14

动态步骤

步骤可以动态的添加和移除，如果删除的是当前处于激活状态的步骤，请务必通过更改应用模型来解决这个问题。

template script

  1. <template>
  2.   <div>
  3.     <v-card class="mb-4">
  4.       <v-card-text>
  5.         <v-select
  6.           v-model="steps"
  7.           :items="[2, 3, 4, 5, 6]"
  8.           label="# of steps"
  9.         ></v-select>
  10.       </v-card-text>
  11.     </v-card>
  12.     <v-stepper v-model="e1">
  13.       <v-stepper-header>
  14.         <template v-for="n in steps">
  15.           <v-stepper-step
  16.             :key="`${n}-step`"
  17.             :complete="e1 > n"
  18.             :step="n"
  19.             editable
  20.           >
  21.             Step {{ n }}
  22.           </v-stepper-step>
  24.           <v-divider
  25.             v-if="n !== steps"
  26.             :key="n"
  27.           ></v-divider>
  28.         </template>
  29.       </v-stepper-header>
  31.       <v-stepper-items>
  32.         <v-stepper-content
  33.           v-for="n in steps"
  34.           :key="`${n}-content`"
  35.           :step="n"
  36.         >
  37.           <v-card
  38.             class="mb-12"
  39.             color="grey lighten-1"
  40.             height="200px"
  41.           ></v-card>
  43.           <v-btn
  44.             color="primary"
  45.             @click="nextStep(n)"
  46.           >
  47.             Continue
  48.           </v-btn>
  50.           <v-btn text>Cancel</v-btn>
  51.         </v-stepper-content>
  52.       </v-stepper-items>
  53.     </v-stepper>
  54.   </div>
  55. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         e1: 1,
  6.         steps: 2,
  7.       }
  8.     },
  10.     watch: {
  11.       steps (val) {
  12.         if (this.e1 > val) {
  13.           this.e1 = val
  14.         }
  15.       },
  16.     },
  18.     methods: {
  19.       nextStep (n) {
  20.         if (n === this.steps) {
  21.           this.e1 = 1
  22.         } else {
  23.           this.e1 = n + 1
  24.         }
  25.       },
  26.     },
  27.   }
  28. </script>

Steppers（步骤条） - 图15