import { h, render } from "vue";
/**
 * 函數(shù)式彈窗
 * @param component 組件
 * @param options 組件參數(shù)
 * @returns
 */
function createDialog(component: any, options: any) {
  return new Promise((resolve, reject) => {
    // 創(chuàng)建一個div節(jié)點
    const mountNode = document.createElement("div");
    // 將div節(jié)點拼接到Dom的body節(jié)點下
    document.body.appendChild(mountNode);
    // 使用h函數(shù)創(chuàng)建節(jié)點
    const vNode = h(component, {
      ...options,
      // 注意: vue子組件emit回調(diào)事件名稱必須以on開頭
      onSubmit: data => {
        resolve(data);
        // 移除節(jié)點
        document.body.removeChild(mountNode);
      },
      onCancel: data => {
        reject(data);
        // 移除節(jié)點
        document.body.removeChild(mountNode);
      }
    });
    // 渲染Dialog
    render(vNode, mountNode);
  });
}
export default createDialog;

// 引入函數(shù)式彈窗
import Dialog from "@/plugins/dialog";
const app = createApp(App);
// 掛載到app
app.config.globalProperties.$dialog = Dialog;

<template>
  <el-dialog v-model="dialogVisible" title="測試函數(shù)式彈窗" width="50%">
    <span>{{ props.content }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">Cancel</el-button>
        <el-button type="primary" @click="handleSubmit"> Submit </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from "vue";
// 注意: 需要按需引入使用到的第三方UI組件
import { ElDialog, ElButton } from "element-plus";
const props = withDefaults(
  defineProps<{
    show?: boolean; // moadl開關(guān)
    content?: string; // 內(nèi)容
  }>(),
  {}
);
const emits = defineEmits(["submit", "cancel"]);
const state = reactive({
  dialogVisible: props.show
});
const { dialogVisible } = toRefs(state);
/** submit */
const handleSubmit = () => {
  // 回調(diào)
  emits("submit", { action: "submit", msg: "submit back" });
  // 關(guān)閉彈窗
  dialogVisible.value = false;
};
/** cancel */
const handleCancel = () => {
  // 回調(diào)
  emits("cancel", { action: "cancel", msg: "cancel back" });
  // 關(guān)閉彈窗
  dialogVisible.value = false;
};
</script>

<template>
  <!-- 動態(tài)函數(shù)式彈窗 -->
  <div class="test_dialog">
    <el-button @click="openModal">調(diào)用函數(shù)式彈窗</el-button>
  </div>
</template>
<script lang="ts" setup>
import { getCurrentInstance } from "vue";
import TestDialog from "./testDialog.vue";
// 通過全局的上下文拿到 proxy 屬性
const { proxy } = getCurrentInstance();
// 調(diào)用函數(shù)式彈窗
const openModal = () => {
  // 調(diào)用彈窗
  proxy
    .$dialog(TestDialog, {
      show: true,
      content: "調(diào)用彈窗成功了！"
    })
    .then(res => {
      // submit
      console.log(res);
    })
    .catch(error => {
      // cancel 回調(diào)
      console.log(error);
    });
};
</script>
<style lang="scss" scoped>
.test_dialog {
  padding: 50px;
}
</style>

// 全局申明下$dialog，可以去除調(diào)用時ts的警告
	declare module "vue" {
	  export interface ComponentCustomProperties {
	    $dialog: any;
	  }
	}