mirror of
https://github.com/mayswind/ezbookkeeping.git
synced 2026-05-15 23:47:33 +08:00
MaysWind
100 lines
4.0 KiB
Vue
100 lines
4.0 KiB
Vue
<template>
|
|
<div class="d-flex" :style="`min-width: ${minWidth}px`" v-if="minWidth"></div>
|
|
<v-slide-group class="slide-group-with-stepper mb-10 hidden-xs" show-arrows>
|
|
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
|
|
<div class="cursor-pointer mx-1"
|
|
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
|
|
@click="changeStep(step)">
|
|
<div class="d-flex align-center gap-x-2">
|
|
<div class="d-flex align-center gap-2">
|
|
<div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
|
|
<div class="slide-group-stepper-indicator"></div>
|
|
</div>
|
|
<h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
|
|
</div>
|
|
<div style="line-height: 0;">
|
|
<h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
|
|
<span class="text-xs step-subtitle">{{ step.subTitle }}</span>
|
|
</div>
|
|
<div class="slide-group-stepper-link-line" v-if="idx < steps.length - 1"></div>
|
|
</div>
|
|
</div>
|
|
</v-slide-group-item>
|
|
</v-slide-group>
|
|
<v-slide-group class="slide-group-with-stepper mb-3 hidden-sm-and-up" direction="vertical">
|
|
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
|
|
<div class="cursor-pointer mx-1 mb-3"
|
|
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
|
|
@click="changeStep(step)">
|
|
<div class="d-flex align-center gap-x-2">
|
|
<div class="d-flex align-center gap-2">
|
|
<div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
|
|
<div class="slide-group-stepper-indicator"></div>
|
|
</div>
|
|
<h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
|
|
</div>
|
|
<div style="line-height: 0;">
|
|
<h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
|
|
<span class="text-xs step-subtitle">{{ step.subTitle }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</v-slide-group-item>
|
|
</v-slide-group>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: [
|
|
'steps',
|
|
'currentStep',
|
|
'minWidth'
|
|
],
|
|
emits: [
|
|
'step:change'
|
|
],
|
|
methods: {
|
|
changeStep(step) {
|
|
this.$emit('step:change', step.name);
|
|
},
|
|
isStepActive(step) {
|
|
return this.currentStep === step.name;
|
|
},
|
|
isStepCompleted(stepIndex) {
|
|
for (let i = 0; i < this.steps.length; i++) {
|
|
if (this.steps[i].name === this.currentStep) {
|
|
return stepIndex < i;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-link-line {
|
|
background-color: rgb(var(--v-theme-primary));
|
|
border-radius: 0.1875rem;
|
|
block-size: .1875rem;
|
|
inline-size: 3.75rem;
|
|
opacity: var(--v-activated-opacity);
|
|
}
|
|
|
|
.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-indicator {
|
|
background-color: rgb(var(--v-theme-surface));
|
|
border: 0.3125rem solid rgb(var(--v-theme-primary));
|
|
border-radius: 50%;
|
|
block-size: 1.25rem;
|
|
inline-size: 1.25rem;
|
|
opacity: var(--v-activated-opacity);
|
|
}
|
|
|
|
.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-indicator,
|
|
.slide-group-with-stepper .v-slide-group__content .slide-group-step-active .slide-group-stepper-indicator,
|
|
.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-link-line {
|
|
opacity: 1;
|
|
}
|
|
</style>
|