4dkankan-components/packages/components/basic/dialog/src/dialog.vue

<template>
    <teleport to="body">
        <div v-if="show" class="ui-dialog" :style="{ zIndex: zIndex }">
            <dialog-content>
                <template v-for="(slot, name) in $slots" #[name]="raw">
                    <slot :name="name" v-bind="raw" />
                </template>
            </dialog-content>
        </div>
    </teleport>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useZIndex } from '@kankan-components/hooks'

import DialogContent from './dialog-content.vue'
const { currentZIndex } = useZIndex()
export default defineComponent({
    name: 'UIDialog',
    components: { DialogContent },
    setup() {
        const show = ref(true)
        return {
            show,
            zIndex: currentZIndex,
        }
    },
})
</script>