/
githubmirror
/
vuetify
Обзор
Документация
Войти
/
githubmirror
/
vuetify
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
packages/docs/src/examples/v-stepper/misc-dynamic.vue
80 строк
2 KB
John Leider
chore: add vue/attributes-order eslint rule
29 фев 2024, 07:06
29 фев 2024, 07:06
65aff8f
Код
Авторство
О чём код?
<template> <div> <v-card class="mb-4"> <v-card-text> <v-select v-model="steps" :items="[2, 3, 4, 5, 6]" label="# of steps" ></v-select> </v-card-text> </v-card> <v-stepper v-model="e1"> <template v-slot:default="{ prev, next }"> <v-stepper-header> <template v-for="n in steps" :key="`${n}-step`"> <v-stepper-item :complete="e1 > n" :step="`Step {{ n }}`" :value="n" editable ></v-stepper-item> <v-divider v-if="n !== steps" :key="n" ></v-divider> </template> </v-stepper-header> <v-stepper-window> <v-stepper-window-item v-for="n in steps" :key="`${n}-content`" :value="n" > <v-card color="grey-lighten-1" height="200" ></v-card> </v-stepper-window-item> </v-stepper-window> <v-stepper-actions :disabled="disabled" @click:next="next" @click:prev="prev" ></v-stepper-actions> </template> </v-stepper> </div> </template> <script setup> import { computed, ref } from 'vue' const e1 = ref(1) const steps = ref(2) const disabled = computed(() => { return e1.value === 1 ? 'prev' : e1.value === steps.value ? 'next' : undefined }) </script> <script> export default { data () { return { e1: 1, steps: 2, } }, computed: { disabled () { return this.e1 === 1 ? 'prev' : this.e1 === this.steps ? 'next' : undefined }, }, } </script>