ImageModal

This commit is contained in:
Jörn-Michael Miehe 2022-10-30 02:35:39 +00:00
parent 382ed35a48
commit b6deb22cc8
3 changed files with 44 additions and 3 deletions

View file

@ -8,7 +8,6 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"bulma": "^0.9.4",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-class-component": "^8.0.0-0"
@ -21,8 +20,9 @@
"@vue/cli-plugin-typescript": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"@vue/eslint-config-typescript": "^9.1.0",
"bulma": "^0.9.4",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"typescript": "~4.5.5"
}
}
}

View file

@ -6,21 +6,27 @@
<CalendarDoor v-for="(_, index) in 24" :key="index" :day="index" />
</div>
<ImageModal />
</div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import CalendarDoor from "./components/CalendarDoor.vue";
import ImageModal from "./components/ImageModal.vue";
@Options({
components: {
CalendarDoor,
ImageModal,
},
})
export default class App extends Vue {}
</script>
<style>
/* @import "@/bulma/"; */
body {
min-height: 100vh;
}
</style>

View file

@ -0,0 +1,35 @@
<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>