84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
<template lang="pug">
|
|
q-stepper(
|
|
v-model="currentStep",
|
|
:color="color",
|
|
:flat="flat",
|
|
class="font-input",
|
|
animated
|
|
)
|
|
q-step.overflow-hidden(
|
|
v-for="step in steps",
|
|
:name="step.id",
|
|
:title="step.value",
|
|
:key="step.id",
|
|
:prefix="step.id + 1"
|
|
:done="currentStep > step.id"
|
|
)
|
|
slot
|
|
q-stepper-navigation.flex.justify-between
|
|
.flex
|
|
q-btn(
|
|
@click="prevStep",
|
|
v-if="currentStep !== 0",
|
|
outline,
|
|
no-caps,
|
|
label="Назад",
|
|
color="primary",
|
|
padding="8px 24px"
|
|
)
|
|
.flex
|
|
q-btn(
|
|
@click="nextStep",
|
|
v-if="currentStep < steps.length-1",
|
|
no-caps,
|
|
label="Далее",
|
|
color="primary",
|
|
padding="8px 24px"
|
|
)
|
|
q-btn(
|
|
@click="finish",
|
|
v-if="currentStep === steps.length-1",
|
|
no-caps,
|
|
:label="finishLabel",
|
|
color="primary",
|
|
padding="8px 24px"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BaseStepperQuasar",
|
|
props: {
|
|
name: Number,
|
|
steps: Array,
|
|
currentStep: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
nextStep: Function,
|
|
prevStep: Function,
|
|
flat: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
color: {
|
|
type: String,
|
|
default: "primary",
|
|
},
|
|
finishLabel: {
|
|
type: String,
|
|
default: "Завершить",
|
|
},
|
|
finish: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.font-input
|
|
font-feature-settings: 'pnum' on, 'lnum' on
|
|
</style>
|