我在制作这个Vuetify stepper代码方面得到了一些帮助，但我还有最后一个问题。我了解您可以设置rules，以便必须填写blanks个blanks。例如，在我的代码中，当您未填写step 3中的blanks并希望继续时，它不会让您失望。但是当你没有填写step 2 step时，它就让你完成了。
有没有办法让用户知道requirements :rules="[() => false]"未满足blanks的情况，例如显示类似 <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" non-linear vertical>
<v-stepper-step :complete="step > 1" step="1" editable>
Person
</v-stepper-step>
<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-step :complete="step > 2" step="2" editable>
Person
</v-stepper-step>
<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" :rules="
[v => !!v || 'Item is required']" 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-step step="3" editable>Misc Info</v-stepper-step>
<v-stepper-content step="3">
<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>
</v-stepper-content>
</v-stepper>
</v-container>
</v-content>
</v-app>
<br/>
<br/>Debug: {{registration}}
</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
官方if vuetify Vuetify stepper
我似乎无法理解icons语句在function clickFunction() {
var change = document.getElementById("btn");
if (change.innerText == "Send")
{
change.innerText = "Sent!";
change.style.border = "4px solid #fff";
change.style.background = "#00E676";
change.style.animation = "anim 1s";
}
}中的工作原理。以及如何更改button {
font-family: 'Nunito', sans-serif;
font-weight: bold;
font-size: 40px;
color: #fff;
background: #01579B;
border: 4px solid #01579B;
border-radius: 100px;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
@keyframes anim {
0% {}
100% { transform: rotateX(180deg)}
}等。