如何通过Vue3+Element Plus自定义弹出框组件

// util.js

import { h, render } from 'vue';

export function initInstance(component, container, option) {
    const vNode = h(component, option);
    render(vNode, container);
    document.body.appendChild(container.firstElementChild);
    return vNode.component;
}

export function getContainer() {
    return document.createElement('div');
}

// common.js

import { initInstance, getContainer } from "./util";
import PortPop from "../components/PortPop";

const instanceMap = new Map();

export const portPop = (option, call) => {
    const container = getContainer();
    let opt = {
        ...option,
        onComfrim: (data) => {
            call(data);
        },
        onVanish: () => {
            render(null, container);
            instanceMap.delete(vm);
        },
    };
    const component = initInstance(PortPop, container, opt);
    const vm = component.proxy;
    component.exposed.openDialog();
    instanceMap.set(vm, { option: opt });
};

<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    :width="width"
    :modal="modal"
    draggable
    destroy-on-close
    :close-on-click-modal="false"
    append-to-body
    :before-close="beforeClose"
    @close="dialogColse"
    @closed="dialogColsed"
  >
    <slot />
    <template #footer>
      <span class="dialog-footer">
        <slot name="footer" />
      </span>
    </template>
  </el-dialog>
</template>
<script setup name="Dialog">
import { ElDialog } from "element-plus";
const props = defineProps({
  modelValue: {
    type: [Boolean],
    default: false,
  },
  title: {
    type: [String],
    default: "",
  },
  width: {
    type: [String],
    default: "",
  },
  modal: {
    type: [Boolean],
    default: false,
  },
  beforeClose: [Function],
});
const emits = defineEmits(["update:modelValue", "onClosed", "closed"]);
function dialogColse() {
  emits("update:modelValue", false);
}
function dialogColsed() {
  emits("onClosed", false);
  emits("closed", false);
}
</script>

<style lang="scss">
</style>

<template>
  <div>
    <Dialog :title="props.title" v-model="dialog" width="920px">
        <!-- ... 弹出框内容 ... -->
        <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" size="small" @click="confrim">
                确定
              </el-button>
              <el-button @click="dialog = false" size="small">取消</el-button>
            </div>
          </template>
    </Dialog>
  </div>
</template>

<script setup lang="tsx">
import {
  nextTick,
  ref, useAttrs,
} from 'vue'
import Dialog from '@/components/dialog'
import {
  ElInput,
  ElButton,
} from 'element-plus'

const props = defineProps({
  title: {
    type: [String],
    default: '',
  },
  type: {
    type: [String],
    default: '',
  },
})

const emits = defineEmits(['comfrim'])
const attrs = useAttrs()
const dialog = ref(false)
function openDialog() {
  dialog.value = true
}
const confrim = async () => {
  emits('comfrim', "传递给父组件的数据")
  nextTick(() => {
    dialog.value = false
  })
}
defineExpose({ openDialog })

</script>
<style lang="scss">
</style>

// 在需要的地方调用自定义弹出框
import { portPop } from "./customDialog";

// 示例调用
portPop({ title: '自定义弹出框', defaultKeyword: '关键字' }, (data) => {
    // 处理弹出框确认后的数据
    console.log('用户选择的数据：', data);
});