Vuetify 步进器垂直和非线性问题

Question

我试图了解Vuetify's stepper但到目前为止我的努力失败了。 我浏览了他们的页面并尝试了不同的steppers ，几乎每个steppers都有我需要的东西，但我不知道如何组合它们。

所以这里有一个例子，它有我需要的东西，但它也缺少我希望它包含的许多东西。

 <!DOCTYPE html> <html> <head> <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"> <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> </head> <body> <div id="app"> <v-app> <v-content> <v-container> <v-stepper v-model="step" vertical> <v-stepper-header> <v-stepper-step step="1" :complete="step > 1">Person</v-stepper-step> <v-divider></v-divider> <v-stepper-step step="2" :complete="step > 2">Your Address</v-stepper-step> <v-divider></v-divider> <v-stepper-step step="3">Misc Info</v-stepper-step> </v-stepper-header> <v-stepper-items> <v-stepper-content step="1"> <v-text-field label="Name" v-model="registration.name" required></v-text-field> <v-text-field label="Email" v-model="registration.email" required></v-text-field> <v-btn color="primary" @click.native="step = 2">Continue</v-btn> </v-stepper-content> <v-stepper-content step="2"> <v-text-field label="Street" v-model="registration.street" required></v-text-field> <v-text-field label="City" v-model="registration.city" required></v-text-field> <v-text-field label="State" v-model="registration.state" required></v-text-field> <v-btn flat @click.native="step = 1">Previous</v-btn> <v-btn color="primary" @click.native="step = 3">Continue</v-btn> </v-stepper-content> <v-stepper-content step="3"> <v-text-field label="Number of Tickets" type="number" v-model="registration.numtickets" required></v-text-field> <v-select label="Shirt Size" v-model="registration.shirtsize" :items="sizes" required></v-select> <v-btn flat @click.native="step = 2">Previous</v-btn> <v-btn color="primary" @click.prevent="submit">Save</v-btn> </v-stepper-content> </v-stepper-items> </v-stepper> </v-container> </v-content> </v-app> <br/><br/>Debug: {{registration}} </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script> <script> new Vue({ el: '#app', data: () => ({ step:1, registration:{ name:null, email:null, street:null, city:null, state:null, numtickets:0, shirtsize:'XL' }, sizes:['S','M','L','XL'] }), methods:{ submit() { alert('This is the post. Blah'); } } }) </script> </body> </html>

官方Vuetify stepper tutorial page Vuetify stepper

首先，我希望它是vertical 。

其次，如果可能的话，我希望continue和previous继续工作，以及完成页面时的复选框checking ，但它也包含一个选项，通过单击它们来快速更改steps ，就像有一个名为non-linear stepper 。

最后是否有内置方法来检查必填字段？ 目前最后有一个required标签，但它什么也不做。

任何帮助/信息都会有用。

Answer 1

对于验证，有很多方法可以做到。 一种方法是将每个步骤包装在一个表单中并使用表单验证https://next.vuetifyjs.com/en/components/forms#example-validation-with-submit-and-clear

<v-form ref="form" v-model="valid" lazy-validation>
    <v-text-field label="Number of Tickets" type="number"
                  v-model="registration.numtickets" 
                  :rules="[v => !!v || 'Item is required']"></v-text-field>
    <v-select label="Shirt Size" 
              v-model="registration.shirtsize"
              :items="sizes" 
              :rules="[v => !!v || 'Item is required']"></v-select>
    <v-btn flat @click.native="step = 2" >Previous</v-btn>
    <v-btn color="primary" @click="submit">Save</v-btn>
</v-form>

并在提交方法中

    methods:{
        submit() {
          if (this.$refs.form.validate()) {
            alert('Data is valid');
          }
        }
    }

演示https://codepen.io/ittus/pen/JvZKYa

Vuetify 步进器垂直和非线性问题

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-05-13 01:05:07

Vuetify 步进器垂直和非线性问题

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-05-13 01:05:07

解决方案1
3 已采纳 2018-05-13 01:05:07