二次封装 el-dialog 实现 全屏和最小化 功能

效果

封装后的组件

 <template><el-dialog v-model="dialogVisible" :show-close="false" :fullscreen="fullscreen" draggable overflow><template #header="{ close }"><div><span style="font-weight: bolder">{{ title0 }}</span><el-icon style="cursor: pointer; float: right" @click="close"><Close /></el-icon><el-icon style="cursor: pointer; float: right; margin-right: 8px" @click="fullScreenFun"><FullScreen /></el-icon><el-icon style="cursor: pointer; float: right; margin-right: 8px" @click="close"><Minus /></el-icon></div></template><slot>默认内容</slot><template #footer><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="submit"> 确定 </el-button></template></el-dialog>
</template><script setup lang="tsx" name="assignRoleDialog">
import { ref } from "vue";
// 标题
const title0 = ref("默认标题");
//弹窗是否显示
const dialogVisible = ref(false);
//是否全屏
const fullscreen = ref(false);//打开对话框
const openDialog = (title: string) => {title0.value = title;dialogVisible.value = true;
};
//关闭对话框
const closeDilog = () => {dialogVisible.value = false;
};const fullScreenFun = () => {fullscreen.value = !fullscreen.value;
};const emits = defineEmits(["fun"]);
const submit = () => {emits("fun");
};defineExpose({openDialog,closeDilog
});
</script>

页面中使用

<template><el-button @click="openDialogFun">haaha</el-button><FullScreenDialog ref="hdialog" @fun="dfun"><el-scrollbar max-height="800px"><h2>111111</h2><h2>111111</h2><!-- <h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2><h2>111111</h2> --></el-scrollbar></FullScreenDialog>
</template>
<script lant=ts>
import FullScreenDialog from "@/components/FullScreenDialog/index.vue";
const hdialog = ref();const openDialogFun = () => {hdialog.value!.openDialog("修改用户");
};
const dfun = () => {alert("执行业务代码……");hdialog.value.closeDilog();
};
</script>