vue3.0 + elementUI 弹窗二次封装

 使用组件：

 <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>