36 lines
749 B
Vue
36 lines
749 B
Vue
|
<template>
|
||
|
|
<div class="modal is-active" v-if="visible" @click="hide">
|
||
|
|
<div class="modal-background" />
|
||
|
|
|
||
|
|
<div class="modal-content">
|
||
|
|
<!-- <p class="image is-4by3"> -->
|
||
|
|
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="" />
|
||
|
|
<!-- </p> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="button" @click="show">modal</button>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Vue } from "vue-class-component";
|
||
|
|
|
||
|
|
export default class ImageModal extends Vue {
|
||
|
|
visible = false;
|
||
|
|
|
||
|
|
public created(): void {
|
||
|
|
window.addEventListener("keydown", (e) => {
|
||
|
|
if (e.key == "Escape") this.hide();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
private show(): void {
|
||
|
|
this.visible = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
private hide(): void {
|
||
|
|
this.visible = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|