47 lines
1 KiB
Vue
47 lines
1 KiB
Vue
<template>
|
|
<div class="modal is-active" v-if="active" @click="set_active(false)">
|
|
<div class="modal-background" />
|
|
|
|
<div class="modal-content">
|
|
<template v-if="progress">
|
|
<progress class="progress is-primary" max="100" />
|
|
</template>
|
|
<template v-else>
|
|
<div class="image is-square">
|
|
<img :src="image_src" alt="Kalender-Bild" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue } from "vue-class-component";
|
|
|
|
export default class extends Vue {
|
|
public active = false;
|
|
public progress = 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_image(src: string) {
|
|
this.progress = false;
|
|
this.image_src = src;
|
|
this.set_active(true);
|
|
}
|
|
|
|
public show_progress() {
|
|
this.progress = true;
|
|
this.set_active(true);
|
|
}
|
|
}
|
|
</script>
|