elk/components/modal/ModalDialog.vue

46 lines
1 KiB
Vue
Raw Normal View History

2022-11-23 03:48:01 +00:00
<script setup lang='ts'>
const { modelValue } = defineModel<{
modelValue: boolean
}>()
2022-11-24 08:04:53 +00:00
2022-11-24 11:48:31 +00:00
let init = $ref(modelValue)
2022-11-24 08:04:53 +00:00
watchOnce(modelValue, () => {
init = true
})
2022-11-23 03:48:01 +00:00
</script>
<template>
<div
class="fixed top-0 bottom-0 left-0 right-0 z-60 overscroll-none overflow-y-scroll scrollbar-hide"
2022-11-23 03:48:01 +00:00
:class="modelValue ? '' : 'pointer-events-none'"
>
<div
class="
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
h-[calc(100%+0.5px)]
2022-11-23 03:48:01 +00:00
"
:class="modelValue ? 'opacity-85' : 'opacity-0'"
@click="modelValue = false"
/>
<div
class="
2022-11-26 03:53:23 +00:00
bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
border border-base top-1/2 -translate-y-1/2 mx-8 md:(left-1/2 -translate-x-1/2)
2022-11-23 03:48:01 +00:00
"
:class="modelValue ? 'opacity-100' : 'opacity-0'"
>
2022-11-24 08:04:53 +00:00
<slot v-if="init" />
2022-11-23 03:48:01 +00:00
</div>
</div>
</template>
<style socped>
.scrollbar-hide {
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
</style>