Vue3 + TS + Element-Plus 封装的 Dialog 弹窗组件

弹窗组件中自定义了header 增加了全屏，svg-icon 没有的话可能会报错，换成自己的图标就可以

<template><el-dialog:dialogHeight="dialogHeight":title="dialogTitle"class="dialog min-w-70"v-model="dialogVisible"append-to-body:modal="dialogModal":fullscreen="fullscreen":close-on-click-modal="dialogClickModalClose":draggable="dialogDraggable":show-close="false":width="dialogWidth":align-center="dialogAlignCenter":center="dialogContentCenter"@open="open"@close="close"><template #header><div class="flex justify-between items-content"><div class="titleClass">{{ dialogTitle }}</div><div class="icon-content"><!-- <el-icon class="single-uploader__icon text-[12px]"><i-ep-minus v-if="fullscreen" /><i-ep-plus v-else /></el-icon>--><div :title="!fullscreen ? '全屏' : '还原'"><svg-iconclass="icon-item-content"v-if="showExpand"@click="zoom":icon-class="fullscreen ? 'fullscreen-exit' : 'fullscreen'"/></div><div title="关闭"><el-iconv-if="showClose"@click="close"title="关闭"class="single-uploader__icon icon-item-content"><i-ep-close /></el-icon></div></div></div></template><div :style="{ height: dialogBodyHeight }" class="overflow-auto"><slot></slot></div><template #footer v-if="dialogFooterBtn"><el-button type="primary" @click="SaveSubmit">确 定</el-button><el-button @click="CloseSubmit">取 消</el-button></template></el-dialog>
</template>

<script setup lang="ts">
// 【接口】接受传参字段
interface IProps {// 是否显示 Dialogvisible: boolean;// 对话框的标题dialogTitle?: string;// 内容区域高度dialogHeight?: string;// 对话框的宽度dialogWidth?: string;// 是否需要遮罩层dialogModal?: boolean;// 是否水平垂直对齐对话框dialogAlignCenter?: boolean;// 是否让 Dialog 的 header 和 footer 部分居中排列dialogContentCenter?: boolean;// 是否可以通过点击 modal 关闭 DialogdialogClickModalClose?: boolean;// 为 Dialog 启用可拖拽功能dialogDraggable?: boolean;// 是否显示底部按钮dialogFooterBtn?: boolean;// 是否显示全屏按钮showExpand?: boolean;// 是否显示关闭按钮showClose?: boolean;
}// 初始化默认参数
const props = withDefaults(defineProps<IProps>(), {dialogTitle: "默认标题",dialogWidth: "40%",dialogHeight: "auto",dialogModal: true,dialogAlignCenter: false,dialogContentCenter: false,dialogClickModalClose: false,dialogDraggable: false,dialogFooterBtn: true,showExpand: false,showClose: true,
});const emit = defineEmits(["save","cancellation","open","close","zoom","update:visible",
]);const dialogVisible = useVModel(props, "visible", emit);
let fullscreen = ref(false);
const dialogBodyHeight = ref<string | number>(); // 初始值为字符串类型// watch监听
watch([() => props.visible, () => props.dialogHeight, () => props.dialogFooterBtn],() => {nextTick(() => {menuDialogZoom();});},{ deep: true, immediate: true }
);// 保存提交回调函数
const SaveSubmit = () => {emit("save"); //emit方法供父级组件调用
};// 取消保存回调函数
const CloseSubmit = () => {emit("cancellation"); //emit方法供父级组件调用
};// 打开事件回调函数
const open = () => {emit("open"); //emit方法供父级组件调用
};// 关闭事件回调函数(当显示头部关闭按钮时需调用该回调函数方法 -> dialogShowClose = true 反之)
const close = () => {emit("close"); //emit方法供父级组件调用
};// 缩放弹窗
const zoom = () => {fullscreen.value = !fullscreen.value;menuDialogZoom();console.log(fullscreen.value);emit("zoom", fullscreen.value); //emit方法供父级组件调用
};/* 分配权限缩放弹窗 */
const menuDialogZoom = () => {if (props.visible && fullscreen.value && props.dialogFooterBtn) {dialogBodyHeight.value = "calc(100vh - 120px)";} else if (props.visible && fullscreen.value && !props.dialogFooterBtn) {dialogBodyHeight.value = "calc(100vh - 80px)";} else {dialogBodyHeight.value = props.dialogHeight;}
};
</script>

<style scoped>
.titleClass {font-weight: bold;
}.icon-content {display: flex;align-items: center;
}.icon-item-content {display: flex;align-items: center;justify-content: center;color: #909399;
}.icon-item-content:nth-child(1) {margin-right: 10px;
}.icon-item-content:hover {color: #1f6feb;cursor: pointer;
}.single-uploader__icon {font-size: 18px;
}
</style>

使用案例

<DialogdialogHeight="350px"v-model:visible="menuDialogVisible":dialogTitle="'【' + checkedRole.name + '】权限分配'":dialogDraggable="true"dialogWidth="30%"@close="menuDialogVisible = false"@save="handleRoleMenuSubmit"@cancellation="menuDialogVisible = false"
>内容区域
</Dialog>

弹窗相关数据

let menuDialogVisible = ref(false);