Vue自定义render实现统一弹框，如何简化长尾疑问？

本文共计3205个文字，预计阅读时间需要13分钟。

一、文本摘要与选择

1.文本获取：使用 `pick` 命令获取文本。

2.统一封装弹框：为什么要统一封装弹框？

- 为了提高代码复用性和维护性。 - 实现弹框样式的统一。

3.封装方式：

- 创建 `normalDialog.vue` 包含弹框主体。 - 创建 `dialogBody.vue` 包含弹框内容。

4.示例：通过以下常规弹框的写法进行封装。

5.实现方式：

- 弹出页面：通常需要一个页面弹出。 - 创建页面：创建 `normalDialog.vue` 和 `dialogBody.vue` 包含弹框。

一、本文收获

pick

二、为什么要统一封装弹框；

要封装成怎样

通过举例常规弹框的写法。我们可以体会到，通常要弹出一个页面，需要创建一个页面 normalDialog.vue 包裹 dialogBody.vue （弹框主体）；需要 parent.vue 设置flag控制弹框显示隐藏， normalDialog.vue 关闭的时候设置 parent.vue 对应 flag 。缺点： 流程繁杂、配置繁琐、不灵活、样式不统一和参数传递麻烦等 。如果一个项目弹框较多的时候，弊端将会更明显，大量的 isXxxDialogShow ，大量的 vue 文件。