github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(components/base/modal): cannot click on page elements after mounting modal components 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-05-16 13:26:42 +08:00
parent 49705b6a80
commit 326a2384be
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/base/modal/Modal.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed, ref } from "vue";
import { IconClose } from "@/core/icons"; import { IconClose } from "@/core/icons";
const props = defineProps({ const props = defineProps({
@ -22,6 +22,8 @@ const props = defineProps({
const emit = defineEmits(["update:visible", "close"]); const emit = defineEmits(["update:visible", "close"]);
const rootVisible = ref(false);
const wrapperClasses = computed(() => { const wrapperClasses = computed(() => {
return { return {
"modal-wrapper-fullscreen": props.fullscreen, "modal-wrapper-fullscreen": props.fullscreen,
@ -42,6 +44,7 @@ function handleClose() {
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div <div
v-show="rootVisible"
:class="wrapperClasses" :class="wrapperClasses"
aria-modal="true" aria-modal="true"
class="modal-wrapper" class="modal-wrapper"
@ -56,6 +59,8 @@ function handleClose() {
leave-active-class="ease-in duration-100" leave-active-class="ease-in duration-100"
leave-from-class="opacity-100" leave-from-class="opacity-100"
leave-to-class="opacity-0" leave-to-class="opacity-0"
@before-enter="rootVisible = true"
@after-leave="rootVisible = false"
> >
<div v-show="visible" class="modal-layer" @click="handleClose()" /> <div v-show="visible" class="modal-layer" @click="handleClose()" />
</transition> </transition>