Vuetify stepper 垂直和非线性问题
Posted
技术标签:
【中文标题】Vuetify stepper 垂直和非线性问题【英文标题】：Vuetify stepper vertical and non-linear issues 【发布时间】：2018-10-23 00:25:02 【问题描述】：我正在尝试理解 Vuetify's stepper 但到目前为止我的努力都失败了。我浏览了他们的页面并尝试了不同的steppers，几乎每个人都有我需要的东西，但我不知道如何组合它们。
所以这里有一个例子，它有我需要的东西，但它也缺少许多我希望它包含的东西。
Codepen
<!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 标签，但它什么也没做。
任何帮助/信息都会很有用。
【问题讨论】：
【参考方案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
【讨论】：
非常感谢，这正是我想要的。 还有一个问题，是否可以将图标设置为checkmark 或将requirements 或fields 全部填满后完成
不知道有没有办法。如果步骤无效，另一个选项是显示错误状态vuetifyjs.com/en/components/steppers#example-vertical-error以上是关于Vuetify stepper 垂直和非线性问题的主要内容，如果未能解决你的问题，请参考以下文章