DaiLog组件封装（提示框）

<script setup lang="ts">
import { ref } from 'vue'
const centerDialogVisible = ref(false)
const open = () => { centerDialogVisible.value = true }
const close = () => { centerDialogVisible.value = false }
const a =() =>{
    console.log("a");
    
}
// 动态暴露我们的组件属性
const prop = defineProps({
    title: String,
    width: {
        type: String,
        default: "25%",
    },
    destroyOnClose: {
        type: Boolean,
        default: false
    },
    calText:{
        type:String,
        default:"取消"
    },
    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-dialog v-model="centerDialogVisible" :title="title" :width="width" center align-center>
            <div class="body">
                <!-- 这是插槽，<slot></slot> 是 HTML 的一个重要特性，也是 Web 组件（Web Components）的一部分。
                            它允许开发者在自定义组件中插入占位符，以便在将来使用时，可以在这些占位符中填充内容。 -->
                <slot></slot>
            </div>
            <template #footer>
                <span>
                    <el-button @click="empty">{{ calText }}</el-button>
                    <el-button type="primary" @click="submit">
                        {{ comfirmText }}
                    </el-button>
                </span>
            </template>
    </el-dialog>
</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>