Vue3 中使用 h + render 渲染组件，实现自定义弹窗功能

Vue3 里面使用模版添加组件非常常见，不过有时候，我们不方便直接把组件写入模版。比如，最常见的情况，在用户进行一些危险的、不可逆的操作前，我们常常需要要求用户确认。要求不高的时候，可以原生 JS confirm；但是如果要求高一些，我们就希望自定义弹窗样式。

这个时候，如果必须事先把弹窗组件放入组件模版，就会很麻烦；如果我们能像使用原生 confirm 一样，使用 if (!myConfirm(message)) return，就会好很多。

但是我没能在 Vue 官方文档找到合适的方案，还是 GPT-4 给我提供了思路，实验之后发现效果比较理想，所以写个笔记记录一下。

import { h, render } from 'vue';
import { ModalsConfirm } from '#components';

export function showConfirmModal(message: string, title = 'Confirm') {
  // 因为要等待用户操作，所以必须返回 Promise
  return new Promise((resolve) => {
    // 创建一个新节点，用来容纳 modal
    const node = document.createElement('div');
    // 使用 `h` 创建虚拟节点，其中ModalsConfirm 是做好的 Vue SFC
    const vnode = h(ModalsConfirm, {
      message,
      title,
      // `on` + `事件名称` 即事件处理函数
      onConfirm() {
        node.remove();
        resolve(true);
      },
      onCancel() {
        node.remove();
        resolve(false);
      },
    });
    document.body.appendChild(node);
    // 使用 `render` 将虚拟节点添加到 DOM 树里
    render(vnode, node);
  });
}

使用的时候只需要调用即可：

function onDelete(item) {
  if (!(await showConfirmModal('are u sure?')) return;

  // 真实的删除逻辑
}

GPT-4 之后，在辅助开发方面的提升非常大，理解更准确，幻觉更少。大家有机会的话多试试。