You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
886 B
46 lines
886 B
<template>
|
|
<div class="modal min-h-screen" v-if="visible">
|
|
<component :is="component"></component>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Mutation } from "../store";
|
|
import { defineComponent } from "vue";
|
|
import { mapMutations, mapState } from "vuex";
|
|
import { modals } from "./modals";
|
|
|
|
export default defineComponent({
|
|
name: "AppModal",
|
|
components: modals,
|
|
computed: {
|
|
...mapState({
|
|
component: "modalName",
|
|
visible: "modalVisible"
|
|
})
|
|
},
|
|
methods: {
|
|
modalClicked() {
|
|
console.log("Modal clicked");
|
|
},
|
|
// ...mapMutations({
|
|
// hide: Mutation.ModalHide
|
|
// })
|
|
},
|
|
mounted() {
|
|
document.addEventListener("keydown", (event: KeyboardEvent) => {
|
|
if (event.key != "Escape") {
|
|
return;
|
|
}
|
|
// this.hide();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="postcss">
|
|
.modal {
|
|
@apply fixed inset-0 flex flex-col;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
</style>
|