Drawer组件封装（抽屉）

<script setup>
import { ref } from 'vue'
const showDrawer = ref(false)
const open = () => { showDrawer.value = true }
const close = () => { showDrawer.value = false }
// 动态暴露我们的组件属性
const prop = defineProps({
    title: String,
    size: {
        type: String,
        default: "45%",
    },
    destroyOnClose: {
        type: Boolean,
        default: false
    },
    comfirmText: {
        type: String,
        default: "提交"
    }
})
const loading = ref(false)
const showloading=()=> loading.value = true
const closeloading=()=> loading.value = false
// 向外暴露点击事件
const emit = defineEmits(["submit","empty"])
const submit = () => emit("submit")
const empty = () => emit("empty")
// 向父组件暴露一下方法
defineExpose({
    open,
    close,
    showloading,
    closeloading,
    prop
})
</script>
<template>
    <el-drawer v-model="showDrawer" :title="title" :size="size" :destroy-on-close="destroyOnClose"
        :close-on-click-modal="false" class="formDrawer">
        <!-- <el-form :model="ruleForm" :rules="rules" label-width="120px" class="DrawerForm" ref="formRef">
        </el-form> -->
        <div class="DrawerForm">
            <div class="body">
                <!-- 这是插槽，<slot></slot> 是 HTML 的一个重要特性，也是 Web 组件（Web Components）的一部分。
                    它允许开发者在自定义组件中插入占位符，以便在将来使用时，可以在这些占位符中填充内容。 -->
                <slot></slot>
            </div>
            <div class="actions">
                <el-button type="primary" @click="submit" :loading="loading">{{ comfirmText }}</el-button>
                <el-button type="default" @click="empty">取消</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<style>
.formDrawer {
    @apply ;
}

.DrawerForm {
    width: 100%;
    height: 100%;
    position: relative;
    /* flex-col垂直排布 */
    @apply flex flex-col;
}

.body {
    /* 超出部分是滚动 */
    overflow-y: auto;
    @apply ;
}

/* margin-top:auto就是会自动至于底部，但是很重要的是！父和子组件都要是块级组件 */
.actions {
    height: 50px;
    @apply mt-auto flex items-center;
}</style>