vuetify入门到放弃之步骤条(v-stepper)

效果展示

前端项目代码

<template>
    <div>
        <v-card elevation="0" style="border:1px solid #EAEBEE">
            <v-card-title class="text-body-1 mx-2" style="height:70px">vuetify入门到放弃之步骤条(v-stepper)</v-card-title>
            <v-divider></v-divider>
            <v-stepper v-model="e1">
                <v-stepper-header>
                    <v-stepper-step :complete="e1 > 1" step="1">
                        step1
                    </v-stepper-step>
                    <v-divider style="flex:1"></v-divider>
                    <v-stepper-step :complete="e1 > 2" step="2">
                        step2
                    </v-stepper-step>
                    <v-divider style="flex:1"></v-divider>
                    <v-stepper-step :complete="e1 > 3" step="3">
                        step3
                    </v-stepper-step>
                    <v-divider style="flex:1"></v-divider>
                    <v-stepper-step :complete="e1 > 4" step="4">
                        step4
                    </v-stepper-step>
                </v-stepper-header>
                <v-stepper-items class="py-8">
                    <v-stepper-content step="1">
                        1
                        <div class="d-flex justify-center">
                            <v-btn class="ml-4" color="blue" @click="change_nextStep">
                                下一步
                            </v-btn>
                        </div>
                    </v-stepper-content>
                    <v-stepper-content step="2">
                        2
                        <div class="d-flex justify-center">
                            <v-btn class="ml-4" color="green" @click="change_back">
                                上一步
                            </v-btn>
                            <v-btn class="ml-4" color="blue" @click="change_nextStep">
                                下一步
                            </v-btn>
                        </div>
                    </v-stepper-content>
                    <v-stepper-content step="3">
                        3
                        <div class="d-flex justify-center">
                            <v-btn class="ml-4" color="green" @click="change_back">
                                上一步
                            </v-btn>
                            <v-btn class="ml-4" color="blue" @click="change_nextStep">
                                下一步
                            </v-btn>
                        </div>
                    </v-stepper-content>
                    <v-stepper-content step="4">
                        4
                        <div class="d-flex justify-center">
                            <v-btn class="ml-4" color="green" @click="change_back">
                                上一步
                            </v-btn>
                        </div>
                    </v-stepper-content>
                </v-stepper-items>
            </v-stepper>
        </v-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            e1: 1
        }
    },
    methods:{
        /**
         * 上一步
         */
        change_back(){
            this.e1 = this.e1 - 1
        },
        /**
         * 下一步
         */
        change_nextStep(){
            this.e1 = this.e1 + 1
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91