46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { vOnClickOutside } from '@vueuse/components';
|
|
import { useEventListener } from '@vueuse/core';
|
|
import { watch } from 'vue';
|
|
|
|
const open = defineModel('open', { default: false });
|
|
|
|
watch(open, value => {
|
|
if (value) {
|
|
document.body.classList.add('overflow-hidden');
|
|
} else {
|
|
document.body.classList.remove('overflow-hidden');
|
|
}
|
|
});
|
|
useEventListener('keyup', e => {
|
|
if (e.key === 'Escape') {
|
|
open.value = false;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Transition name="fade">
|
|
<template v-if="open">
|
|
<div class="fixed inset-0 z-10">
|
|
<div class="absolute bg-black opacity-80 inset-0 z-0" />
|
|
<div class="absolute grid inset-0">
|
|
<div class="justify-self-center m-auto" v-on-click-outside="() => open = false">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped lang="postcss">
|
|
.fade-enter-from, .fade-leave-to {
|
|
@apply opacity-0;
|
|
}
|
|
|
|
.fade-enter-active, .fade-leave-active {
|
|
@apply transition-opacity;
|
|
}
|
|
</style>
|