多维表格
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.
 
 
 
 
 
 

58 lines
1.4 KiB

<script lang="ts" setup>
import { onKeyDown } from '@vueuse/core'
import type { TeleportProps } from '@vue/runtime-core'
import { useVModel, watch } from '#imports'
interface Props {
modelValue?: any
/** if true, overlay will use `position: absolute` instead of `position: fixed` */
inline?: boolean
/** target to teleport to */
target?: TeleportProps['to']
teleportDisabled?: TeleportProps['disabled']
transition?: boolean
}
interface Emits {
(event: 'update:modelValue', value: boolean): void
(event: 'close'): void
(event: 'open'): void
}
const { transition = true, teleportDisabled = false, inline = false, target, ...rest } = defineProps<Props>()
const emits = defineEmits<Emits>()
const vModel = useVModel(rest, 'modelValue', emits)
onKeyDown('Escape', () => {
vModel.value = false
})
watch(vModel, (nextVal) => {
if (nextVal) emits('open')
else emits('close')
})
</script>
<script lang="ts">
export default {
inheritAttrs: false,
}
</script>
<template>
<teleport :disabled="teleportDisabled || (inline && !target)" :to="target || 'body'">
<div
v-bind="$attrs"
:class="[
vModel ? 'opacity-100' : 'opacity-0 pointer-events-none',
inline ? 'absolute' : 'fixed',
transition ? 'transition-opacity duration-200 ease-in-out' : '',
]"
class="z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
>
<slot :is-open="vModel" />
</div>
</teleport>
</template>