Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 00:03:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

DoorPlacer v-model

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-01-23 23:37:23 +00:00
parent 5752d2b814
commit 9d9e3faa02
2 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/DoorMapEditor.vue
View file

@ -20,7 +20,7 @@
</ul> </ul>
</nav> </nav>
<DoorPlacer v-if="current_step === 0" /> <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
<p v-if="current_step === 1">Foo</p> <p v-if="current_step === 1">Foo</p>
<p v-if="current_step === 2">Bar</p> <p v-if="current_step === 2">Bar</p>
</div> </div>
@ -29,6 +29,7 @@
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Vue, Options } from "vue-class-component";
import DoorPlacer from "./door_map/DoorPlacer.vue"; import DoorPlacer from "./door_map/DoorPlacer.vue";
import { Rectangle } from "./rects/rectangles";
type Step = { type Step = {
label: string; label: string;
@ -47,6 +48,7 @@ export default class DoorMapEditor extends Vue {
{ label: "Überprüfen", icon: "fa-solid fa-check" }, { label: "Überprüfen", icon: "fa-solid fa-check" },
]; ];
private current_step = 0; private current_step = 0;
private rectangles: Rectangle[] = [];
private change_step(next_step: number) { private change_step(next_step: number) {
this.current_step = next_step; this.current_step = next_step;

23
ui/src/components/door_map/DoorPlacer.vue
View file

@ -9,21 +9,40 @@
</div> </div>
<figure class="image"> <figure class="image">
<img src="@/assets/adventskalender.jpg" /> <img src="@/assets/adventskalender.jpg" />
<RectPad /> <RectPad ref="rect_pad" />
</figure> </figure>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Vue, Options } from "vue-class-component"; import { Vue, Options } from "vue-class-component";
import { Rectangle } from "../rects/rectangles";
import RectPad from "../rects/RectPad.vue"; import RectPad from "../rects/RectPad.vue";
@Options({ @Options({
components: { components: {
RectPad, RectPad,
}, },
props: {
rectangles: Array,
},
emits: ["update:rectangles"],
}) })
export default class DoorPlacer extends Vue {} export default class DoorPlacer extends Vue {
private rectangles!: Rectangle[];
declare $refs: {
rect_pad: RectPad;
};
public mounted() {
this.$refs.rect_pad.rectangles = this.rectangles;
}
public beforeUnmount() {
this.$emit("update:rectangles", this.rectangles);
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>