36 lines
732 B
Vue
36 lines
732 B
Vue
<template>
|
|
<div class="modal is-active" v-if="modelValue" @click="hide">
|
|
<div class="modal-background" />
|
|
|
|
<div class="modal-content">
|
|
<!-- <p class="image is-4by3"> -->
|
|
<img :src="imageUrl" alt="" />
|
|
<!-- </p> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Options, Vue } from "vue-class-component";
|
|
|
|
@Options({
|
|
props: {
|
|
modelValue: Boolean,
|
|
imageUrl: String,
|
|
},
|
|
})
|
|
export default class ImageModal extends Vue {
|
|
modelValue!: boolean;
|
|
imageUrl!: string;
|
|
|
|
public created(): void {
|
|
window.addEventListener("keydown", (e) => {
|
|
if (e.key == "Escape") this.hide();
|
|
});
|
|
}
|
|
|
|
private hide(): void {
|
|
this.$emit("update:modelValue", false);
|
|
}
|
|
}
|
|
</script>
|