70 lines
No EOL
1.6 KiB
Vue
70 lines
No EOL
1.6 KiB
Vue
<template>
|
|
<section>
|
|
<div class="content">
|
|
<ul>
|
|
<li>Linksklick: Türchen auswählen</li>
|
|
</ul>
|
|
</div>
|
|
<figure class="image">
|
|
<img src="@/assets/adventskalender.jpg" />
|
|
<ThouCanvas>
|
|
<SVGRect
|
|
v-for="(rect, index) in rectangles"
|
|
:key="`rect-${index}`"
|
|
:rectangle="rect"
|
|
@click.left="choose_rect(index)"
|
|
style="cursor: pointer"
|
|
/>
|
|
<template
|
|
v-for="(rect, index) in rectangles_chosen"
|
|
:key="`rect_chosen-${index}`"
|
|
>
|
|
<SVGRect :rectangle="rect" :focused="true" />
|
|
<SVGRectText :rectangle="rect" :text="String(index)" />
|
|
</template>
|
|
</ThouCanvas>
|
|
</figure>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
import { Rectangle } from "../rects/rectangles";
|
|
|
|
import ThouCanvas from "../rects/ThouCanvas.vue";
|
|
import SVGRect from "../rects/SVGRect.vue";
|
|
import SVGRectText from "../rects/SVGRectText.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
ThouCanvas,
|
|
SVGRect,
|
|
SVGRectText,
|
|
},
|
|
props: {
|
|
rectangles: Array,
|
|
},
|
|
emits: ["update:rectangles"],
|
|
})
|
|
export default class extends Vue {
|
|
private rectangles!: Rectangle[];
|
|
private rectangles_chosen: Rectangle[] = [];
|
|
|
|
public choose_rect(index: number) {
|
|
this.rectangles_chosen.push(this.rectangles.splice(index, 1)[0]);
|
|
}
|
|
|
|
public beforeUnmount() {
|
|
this.$emit(
|
|
"update:rectangles",
|
|
this.rectangles.concat(this.rectangles_chosen)
|
|
);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
section > figure {
|
|
user-select: none;
|
|
}
|
|
</style> |