缘由：项目要用到一个弹框，需要公共函数内调用。考虑封装成像 Element Plus 的 ElMessageBox.confirm 的方式调用，而不是直接在 template 中写组件的方式调用。

思路逻辑

实现

实现弹框 component

<template>
  <el-dialog
    v-model="visible"
    width="480"
    :title="props.title"
    :close-on-click-modal="false"
    @close="onClose()"
    @open="onOpen()"
  >
    <template #default>
      <el-form ref="formRef" :model="formData" inline-message label-width="120px">
        <template v-for="(item, index) in formData.barcodeList" :key="index">
          <el-form-item
            :label="`${$t('common.label')}(${index + 1})`"
            :prop="`barcodeList.${index}.barcode`"
            :rules="getRule(index)"
          >
            <div class="w-full flex items-center">
              <el-input v-model="item.barcode"></el-input>
              <el-button
                v-if="index !== 0"
                class="flex-center ml-10"
                type="plain"
                size="small"
                circle
                @click="onDelete(index)"
              >
                <i class="iconfont icon-delete ml-4 error-color"></i>
              </el-button>
            </div>
          </el-form-item>
        </template>
      </el-form>
      <el-button type="primary" @click="addNewBarcode()">{{ $t('common.addBarCode') }}</el-button>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onClose()">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" @click="submitForm(formRef)">
          {{ $t('common.confirm') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { computed, reactive, ref, PropType } from 'vue'
import { useI18n } from 'vue-i18n'

const { t: $t } = useI18n()

defineOptions({
  name: 'CompleteDialog',
})

const props = defineProps({
  message: String,
  title: String,
  onOpen: Function as PropType<() => void>,
  onCancel: Function as PropType<() => void>,
  onConfirm: Function as PropType<(data: any) => void>,
})
const emits = defineEmits(['submit'])

const visible = defineModel({ type: Boolean, default: false })

const formRef = ref<FormInstance>()
const formDataDefault = {
  barcodeList: [
    {
      barcode: '',
    },
  ] as any[],
}
const formData = reactive<typeof formDataDefault>({ ...formDataDefault })
const formRules = reactive<FormRules>({})
const getRule = (index?: number) => {
  return [{ required: true, message: $t('common.RequiredInput'), trigger: 'change' }]
}

const onDelete = (index: number) => {
  formData.barcodeList.splice(index, 1)
}

const addNewBarcode = () => {
  const len = formData.barcodeList.length
  formData.barcodeList.push({ barcode: '' })
}

const onOpen = () => {
  const { onOpen } = props
  if (onOpen) {
    onOpen()
  }
}

const onClose = () => {
  const { onCancel } = props
  if (onCancel) {
    onCancel()
  }
  formRef.value?.resetFields()
  Object.assign(formData, formDataDefault)
  visible.value = false
}

const submitForm = async (formEl?: FormInstance) => {
  if (!formEl) return

  await formEl.validate(async (valid: any) => {
    if (!valid) return false
    const result = { ...formData }
    emits('submit', result)
    if (props.onConfirm) {
      props.onConfirm(result)
    }
    onClose()
  })
}
</script>

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

封装函数方式调用 index.tsx
因为用了 sx ，所以没有用 h 函数.如果没有用 jsx，需要用 h 函数创建 VNode

import { i18n, locale } from '@/lang/index'
import { createApp, ref, watch } from 'vue'
import ElementPlus from 'element-plus'
import CompleteDialog from './completeDialog.vue'

export const useConfirmCompleteDialog = <T extends any>(
  message?: string,
  title?: string
): Promise<T> => {
  return new Promise((resolve, reject) => {
    const div = document.createElement('div')
    document.body.appendChild(div)

    const app = createApp({
      setup() {
        const visible = ref(true)

        const close = () => {
          visible.value = false
        }

        const onConfirm = (data: any) => {
          resolve(data)
          close()
        }

        const onCancel = () => {
          reject()
          close()
        }

        watch(visible, newValue => {
          if (!newValue) {
            app.unmount()
            document.body.removeChild(div)
          }
        })

        return () => (
          <CompleteDialog
            modelValue={visible.value}
            onUpdate:modelValue={value => {
              visible.value = value
            }}
            message={message}
            title={title}
            onConfirm={onConfirm}
            onCancel={onCancel}
          ></CompleteDialog>
        )
      },
    })
    // 因为项目用了 i18n 国际化， ElementPlus UI组件，所以引入
    // 根据实际项目需要修改，不需要i18n，ElementPlus的可以取消，只需要注册自定义组件
    app.use(i18n).use(ElementPlus, { locale })
    app.component(CompleteDialog.name, CompleteDialog)
    app.mount(div)
  })
}

最小化实现：

vim myComponent.vue

<template>
	<div v-if="visiable">
		<div class="title">{{props.title}}</div>
		<div class="message">{{props.message}}</div>
		<div @click="onCancel">Cancel</div>
		<div @click="onConfirm">Confirm</div>
	</div>
<template>

<script setup>

const props = defineProps({
	title: String,
	message: String,
	onOpen: Function as PropType<() => void>,
  	onCancel: Function as PropType<() => void>,
  	onConfirm: Function as PropType<(data: any) => void>,
})

const onOpen = () => {
  const { onOpen } = props
  if (onOpen) {
    onOpen()
  }
}
const onCancel= () => {
  const { onCancel} = props
  if (onCancel) {
    onCancel()
  }
}
const onConfirm= () => {
  const { onConfirm} = props
  if (onConfirm) {
    onConfirm()
  }
}
</script>

vim completeDialog.tsx

import { createApp, ref, watch } from 'vue'
import CompleteDialog from './completeDialog.vue'

export const useConfirmCompleteDialog = <T extends any>(
  message?: string,
  title?: string
): Promise<T> => {
  return new Promise((resolve, reject) => {
    const div = document.createElement('div')
    document.body.appendChild(div)

    const app = createApp({
      setup() {
        const visible = ref(true)

        const close = () => {
          visible.value = false
        }

        const onConfirm = (data: any) => {
          resolve(data)
          close()
        }

        const onCancel = () => {
          reject()
          close()
        }

        watch(visible, newValue => {
          if (!newValue) {
            app.unmount()
            document.body.removeChild(div)
          }
        })

        return () => (
          <CompleteDialog
            modelValue={visible.value}
            onUpdate:modelValue={value => {
              visible.value = value
            }}
            message={message}
            title={title}
            onConfirm={onConfirm}
            onCancel={onCancel}
          ></CompleteDialog>
        )
      },
    })
    app.component(CompleteDialog.name, CompleteDialog)
    app.mount(div)
  })
}