mirror of
https://code.lenaisten.de/Lenaisten/advent22.git
synced 2024-11-23 00:03:07 +00:00
BulmaBreadcrumbs v-model
This commit is contained in:
parent
be78671ffe
commit
c74c63be54
2 changed files with 9 additions and 9 deletions
|
@ -4,7 +4,7 @@
|
||||||
<li
|
<li
|
||||||
v-for="(step, index) in steps"
|
v-for="(step, index) in steps"
|
||||||
:key="`step-${index}`"
|
:key="`step-${index}`"
|
||||||
:class="current === index ? 'is-active' : ''"
|
:class="modelValue === index ? 'is-active' : ''"
|
||||||
@click="change_step(index)"
|
@click="change_step(index)"
|
||||||
>
|
>
|
||||||
<a>
|
<a>
|
||||||
|
@ -29,20 +29,20 @@ export interface Step {
|
||||||
@Options({
|
@Options({
|
||||||
props: {
|
props: {
|
||||||
steps: Array,
|
steps: Array,
|
||||||
current: Number,
|
modelValue: Number,
|
||||||
},
|
},
|
||||||
emits: ["update:current"],
|
emits: ["update:modelValue"],
|
||||||
})
|
})
|
||||||
export default class extends Vue {
|
export default class extends Vue {
|
||||||
private steps!: Step[];
|
private steps!: Step[];
|
||||||
private current!: number;
|
private modelValue!: number;
|
||||||
|
|
||||||
private change_step(next_step: number) {
|
private change_step(next_step: number) {
|
||||||
if (next_step === this.current) {
|
if (next_step === this.modelValue) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$emit("update:current", next_step);
|
this.$emit("update:modelValue", next_step);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<p class="title is-4">Türchen bearbeiten</p>
|
<p class="title is-4">Türchen bearbeiten</p>
|
||||||
|
|
||||||
<BulmaBreadcrumb :steps="steps" v-model:current="current_step" />
|
<BulmaBreadcrumbs :steps="steps" v-model="current_step" />
|
||||||
|
|
||||||
<DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
|
<DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
|
||||||
<DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
|
<DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
|
||||||
|
@ -14,13 +14,13 @@
|
||||||
import { Vue, Options } from "vue-class-component";
|
import { Vue, Options } from "vue-class-component";
|
||||||
import { Rectangle } from "./rects/rectangles";
|
import { Rectangle } from "./rects/rectangles";
|
||||||
|
|
||||||
import BulmaBreadcrumb, { Step } from "./BulmaBreadcrumb.vue";
|
import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
|
||||||
import DoorPlacer from "./door_map/DoorPlacer.vue";
|
import DoorPlacer from "./door_map/DoorPlacer.vue";
|
||||||
import DoorChooser from "./door_map/DoorChooser.vue";
|
import DoorChooser from "./door_map/DoorChooser.vue";
|
||||||
|
|
||||||
@Options({
|
@Options({
|
||||||
components: {
|
components: {
|
||||||
BulmaBreadcrumb,
|
BulmaBreadcrumbs,
|
||||||
DoorPlacer,
|
DoorPlacer,
|
||||||
DoorChooser,
|
DoorChooser,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue