ImageModal
This commit is contained in:
parent
382ed35a48
commit
b6deb22cc8
3 changed files with 44 additions and 3 deletions
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
35
ui/src/components/ImageModal.vue
Normal file
35
ui/src/components/ImageModal.vue
Normal 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>
|
Loading…
Reference in a new issue