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 还是很方便的。 示例代码: "jsx"