for_client/src/global/components/hc-drawer/index.vue

<template>
    <Suspense v-if="isBody">
        <Teleport :to="`#${toId}`">
            <el-drawer ref="drawerRef" :modal-class="uis" :class="`hc-drawer-box ${ui}`" v-model="isShow" :with-header="false" :direction="direction" :size="size" destroy-on-close @closed="drawerClosed">
                <HcCard :title="title" :extraText="extraText" :actionSize="actionSize" :scrollbar="scrollbar" :actionUi="actionUi" v-if="isCard">
                    <template #header v-if="isSlotHeader">
                        <slot name='header'/>
                    </template>
                    <template #extra v-if="isSlotExtra">
                        <slot name='extra'/>
                    </template>
                    <template #search v-if="isSlotSearchBar">
                        <slot name='search'/>
                    </template>
                    <template #action v-if="isSlotAction">
                        <slot name='action'/>
                    </template>
                    <slot></slot>
                </HcCard>
                <slot v-if="!isCard"></slot>
            </el-drawer>
        </Teleport>
    </Suspense>
</template>

<script setup>
import {ref, nextTick, watch, useSlots} from "vue";
const props = defineProps({
    uis: {
        type: String,
        default: ''
    },
    ui: {
        type: String,
        default: ''
    },
    show: {
        type: Boolean,
        default: false
    },
    toId: {
        type: [String,Number],
        default: ''
    },
    title: {
        type: [String,Number],
        default: ''
    },
    //rtl / ltr / ttb / btt
    direction: {
        type: String,
        default: 'ttb'
    },
    scrollbar: {
        type: Boolean,
        default: false
    },
    extraText: {
        type: [String,Number],
        default: ''
    },
    actionSize: {
        type: [String,Number],
        default: 'lg'
    },
    size: {
        type: [String,Number],
        default: '100%'
    },
    isCard: {
        type: Boolean,
        default: true
    },
    actionUi: {
        type: String,
        default: ''
    },
})

//变量
const isShow = ref(props.show)
const isBody = ref(false)

//监听
watch(() => [
    props.show
], ([show]) => {
    isShow.value = show
})

//渲染完成
nextTick(()=> {
    //页面渲染完成后，再让 vue3 的 Teleport，挂载到指定节点
    isBody.value = true
})

//判断<slot>是否有传值
const slots = useSlots()
const isSlotHeader = ref(!!slots.header);
const isSlotExtra = ref(!!slots.extra);
const isSlotAction = ref(!!slots.action);
const isSlotSearchBar = ref(!!slots.search);

const drawerRef = ref(null)
const emit = defineEmits(['close'])

//关闭
const drawerClosed = () => {
    isShow.value = false
    emit('close', false)
}

const handleClose = () => {
    drawerRef.value?.handleClose()
}

// 暴露出去
defineExpose({
    handleClose
})
</script>

<style lang="scss">
.hc-card-box.el-card .el-card__body .hc-card-main-box .el-overlay {
    position: absolute;
    .hc-drawer-box.el-drawer {
        background-color: transparent;
        box-shadow: initial;
        .el-drawer__body {
            padding: 24px;
            overflow: hidden;
            .data-fill-list-box .el-collapse .el-collapse-item__wrap .el-collapse-item__content .data-fill-list-item-content {
                height: calc(100vh - 545px);
            }
        }
    }
}
</style>