通过动态挂载组件打开 Dialog

通常打开 Dialog 是把 Dialog 所有内容以标签的形式写在了 template 。而我不想写在 template ，直接调用一个方法打开该如何做呢？

如以下写法：

单击按钮调用 showDialog ,给 openDialog 方法传 Dialog 的一些初始化属性即参数容。

const showDialog = () => {
      openDialog({
        title: h("p", {}, "标题"),
        content: "这是一段内容",
        ok() {},
        cancel() {},
      });
    };

那 openDialog 方法如何写呢？基于动态挂载组件的思想思考步骤如下：

动态挂载组件

• 由于直接将 Dialog 放到 body 上会取代 body 上的内容，不可取
• 在 openDialog 中创建一个div放在 body 上
• 引入 Dialog 组件
• 使用 createApp 渲染 Dialog 挂载到 div 上
• 改用 h 函数 渲染 Dialog ，因为他可以接受参数
• 将 openDialog 接受的参数给 h 函数
• 注意：默认 控制打开和关闭 Dialog 的属性 visible 的属性值为 true，由 openDialog 自己提供
• 要关闭 Dialog 时：visible 不可以被修改，因此需要监听 visible 的变化把取消 div 的挂载并将 div 直接销毁即可关闭 Dialog
• 把方法写在 ts 文件中并将他导出

实现了调用 openDialog 方法打开 Dialog 的功能

打开 Dialog 的常用方法

• 把 Dialog 直接放在页面
• 通过声明一个 visible 变量并根据改变他的值来决定 Dialog是否打开

总结

• 两种方法究其本质是一样的
• 区别就在于是否直接把 Dialog 放在页面
• 要么改用 h 函数将 Dialog 动态挂载到页面