36 lines
861 B
Vue
36 lines
861 B
Vue
<template>
|
|
<Teleport to="body">
|
|
<div v-if="modelValue" class="fixed inset-0 z-50">
|
|
<!-- Backdrop - click to close -->
|
|
<div class="fixed inset-0 bg-black/50 cursor-pointer" @click="close"></div>
|
|
|
|
<!-- Modal Panel -->
|
|
<div class="fixed inset-0 flex items-center justify-center pointer-events-none">
|
|
<div
|
|
class="bg-white rounded-lg shadow-xl w-[80vw] aspect-video max-h-[85vh] overflow-hidden relative pointer-events-auto"
|
|
:style="{ maxHeight }"
|
|
>
|
|
<!-- Content -->
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
modelValue: Boolean,
|
|
maxHeight: {
|
|
type: String,
|
|
default: '85vh'
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const close = () => {
|
|
emit('update:modelValue', false)
|
|
}
|
|
</script>
|