vue3优雅的使用useDialog

在日常开发时，弹窗是一个经常使用的功能，而且重复性极高，你可能会遇到下面这些问题:1、一个页面内多个弹窗, 要维护多套弹窗状态,看的眼花缭乱2、弹窗内容比较简单，声明变量 + 模板语法的方式写起来比较麻烦

关于这些问题, 我首先想到的是应该弄一个即用即走的 Dialog ，不用去单独维护它的状态，使用 Dialog({ xxx }) 这种形式去调用它，例如下面这种配置的方式：

Dialog({
    title: 'xxx',
    render: () => xxx
})

其中 render 可以是一个 html 字符串，也可以是 jsx (需要配置对jsx的支持)，这样可以对内容区域实现自定义。

通过配置项调用

各大主流的ui库基本都实现了这种调用方式：

• Ant Design Vue的  Modal
• Element-plus的  MessageBox

之前没有注意到 Element-plus 的 MessageBox 可以使用jsx，大部分场景下,用它来代替 Dialog 还是很方便的。 示例代码: