62 lines
No EOL
1.2 KiB
Vue
62 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<div ref="container">
|
|
<img ref="background" src="@/assets/adventskalender.jpg" />
|
|
<RectPad id="rectpad" />
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Options } from "vue-class-component";
|
|
import RectPad from "./rects/RectPad.vue";
|
|
|
|
@Options({
|
|
components: {
|
|
RectPad,
|
|
},
|
|
})
|
|
export default class CalendarImage extends Vue {
|
|
private resize_observer?: ResizeObserver;
|
|
|
|
declare $refs: {
|
|
container: HTMLDivElement;
|
|
background: HTMLImageElement;
|
|
};
|
|
|
|
private on_resize() {
|
|
this.$refs.container.style.height =
|
|
this.$refs.background.offsetHeight + "px";
|
|
}
|
|
|
|
public mounted() {
|
|
this.resize_observer = new ResizeObserver(this.on_resize);
|
|
this.resize_observer.observe(this.$refs.background);
|
|
}
|
|
|
|
public unmounted() {
|
|
if (this.resize_observer instanceof ResizeObserver) {
|
|
this.resize_observer.disconnect();
|
|
delete this.resize_observer;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
div {
|
|
position: relative;
|
|
user-select: none;
|
|
|
|
img {
|
|
position: absolute;
|
|
z-index: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
#rectpad {
|
|
position: absolute;
|
|
z-index: 2;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style> |