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

Question

我正在努力理解 Vuetify's stepper 但到目前为止我的努力都失败了。我浏览了他们的页面并尝试了不同的 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>

官方Vuetifystepper tutorial pageVuetify stepper

首先我希望它是vertical。

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

的示例一样

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

任何 help/information 都会有用。

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 步进器垂直和非线性问题

Vuetify stepper vertical and non-linear issues

html

javascript

vue.js

vuetify.js