使用组件：

 <page-dialog v-model:dialogShow="gisLock" footerCustom>{{gisLock}}</page-dialog><page-dialog v-model:dialogShow="gisLock">{{gisLock}}<template #dialog-button><el-button type="primary" plain @click="handleClose"><el-icon class="el-icon--left"><Close /></el-icon>返回</el-button></template></page-dialog>

 组件封装：

<template v-if="dialogVisible"><el-dialog v-model="dialogVisible" :width="width" :before-close="handleClose"><template #header><div class="dialogTitle">// 弹窗名称前面都有一个icon  名称不icon也不一样， #header 可以根据自己的需求调整<el-icon v-if="header.icon" :class="selectClass()"></el-icon><span>{{ header.title }}</span></div></template> <slot></slot>  <template #footer v-if="footerCustom"><div class="dialog-footer"><el-button type="primary" plain @click="handleClose"><el-icon class="el-icon--left"><Close /></el-icon>取消</el-button><el-button type="primary" @click="saveBtnFn"><el-icon class="el-icon--left"><Check /></el-icon>确定</el-button></div></template><template #footer v-else><div class="dialog-footer"><slot name="dialog-button"></slot></div></template> </el-dialog>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue";
export default defineComponent({name: "PageDialog",props: {dialogShow: {type: Boolean,default: false,},header: {type: Object,default: {icon: "",title: "",},},width: {type: String,default: "40%",},footerCustom: {type: Boolean,default: false,},},  setup(props, { emit }) {// 数据const state = reactive({dialogVisible: false,});// 方法const methods = reactive({ selectClass: () => {let icon = "";if (props.header.icon) {icon = "iconfont " + props.header.icon;}return icon;},handleClose: () => {state.dialogVisible = false;},saveBtnFn: () => {emit("saveBtnFn");},});watch(() => state.dialogVisible,(val) => { //查看子组件值是否变化，在赋值给父组件emit("update:dialogShow", val);});watch(() => props.dialogShow,(val) => {//查看父组件值是否变化，在赋值给子组件state.dialogVisible = val;});return {...toRefs(state),...toRefs(methods),};},
});
</script> 
<style scoped>
.dialog-footer{text-align: center;
}
</style>