35 lines
755 B
Vue
35 lines
755 B
Vue
<template>
|
|
<div class="modal is-active" v-if="active" @click="set_active(false)">
|
|
<div class="modal-background" />
|
|
|
|
<div class="modal-content">
|
|
<div class="image is-square">
|
|
<img :src="image_src" alt="Kalender-Bild" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue } from "vue-class-component";
|
|
|
|
export default class ImageModal extends Vue {
|
|
private active = false;
|
|
public image_src = "";
|
|
|
|
public created() {
|
|
window.addEventListener("keydown", (e) => {
|
|
if (e.key == "Escape") this.set_active(false);
|
|
});
|
|
}
|
|
|
|
public set_active(state: boolean) {
|
|
this.active = state;
|
|
}
|
|
|
|
public show_src(src: string) {
|
|
this.image_src = src;
|
|
this.set_active(true);
|
|
}
|
|
}
|
|
</script>
|