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 之后,在辅助开发方面的提升非常大,理解更准确,幻觉更少。大家有机会的话多试试。

如果您觉得文章内容对您有用,不妨支持我创作更多有价值的分享:


已发布

分类

来自

标签:

评论

欢迎吐槽,共同进步

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据