Component 组件的函数调用

<van-popup v-model:show="visiblePopup">
  <Comp v-if="visiblePopup" :some-props="someProps" />
</van-popup>

<script lang="ts" setup>
import {ref, reactive} from 'vue'

const visiblePopup = ref(false)
const someProps = reactive()
</script>

const handleOpenComp = () => {
  showPopup(comp, someProps)
}

import { createVNode, render, h, nextTick } from 'vue'
import type { Component, VNode } from 'vue'
import type { PopupProps } from 'vant'
import Popup from './popup.vue'

interface Options extends PopupProps {
  title?: string
  showConfirmButton?: boolean
  showCancelButton?: boolean
  onBeforeConfirm?: () => Promise<void>
}

type CloseType = 'close' | 'cancel' | 'confirm'

interface ShowPopup {
  (comp: Component, props: Record<string, any> | null, options: Partial<Options>): Promise<void>
}

export const showPopup: ShowPopup = (comp, props = {}, options = {}) => {
  return new Promise((resolve, reject) => {
    const container = document.createElement('div')
    document.body.appendChild(container)

    const closePopup = (type: CloseType) => {
      render(null, container)
      document.body.removeChild(container)
      type === 'confirm' ? resolve() : reject(type)
    }

    const onUpdateShow = async (value: boolean, type: CloseType) => {
      await nextTick()
      if (!value) {
        closePopup(type)
      }
    }

    const vnode = createVNode(
      Popup,
      {
        ...options,
        show: true,
        'onUpdate:show': onUpdateShow
      },
      {
        default: (): VNode => h(comp, { ...props, closePopup })
      }
    )

    render(vnode, container)
  })
}