平时使用弹窗的场景分成两类:
- 基本类型的, 当前项目的基本 alert, confirm 等.
- 衍生类型的, 虽然样子也是弹窗, 但是它里面的内容已经不是基本类型的弹窗所拥有的. 比如弹一个列表让用户选择, 弹出一个图片, 弹出一个表格等等. 像这种, 我觉得叫做 dialog 更合适一些.
再说说平时遇见的和弹窗的一些需求:
- 项目 A 的基本弹窗类型, 跟随 iOS 系统弹窗, 也就是它的弹窗的样式要和 iOS 系统的弹窗样式一致. 但是项目 B, 基本弹窗, 又要跟随微信的样式. 然后 C 可能又要和安卓的样式一致. 甚至于项目 X, 它的弹窗 样式是 UI 定制的.
对于这种情况. 我们有一些解决方案:
- 每一个项目再实现一遍弹窗
- 实现一个通用的弹窗, 里面冗余了多套弹窗
- 给定一种基础调用, 让用户可以自己定义弹窗组件. 这样用户就可以不需要再定义弹窗的逻辑, 而只要写一遍样式.
最后一种, 就是我所想要的实现方式. 这种方式有一些优点:
- 不会提前内置多套样式, 所以体积上面有保障. 用户也不会总是想着有几套样式我没用到但是还要加载进来, 好难受.
- 理论上支持任意用户自定义的弹窗样式, 还免去了用户自己写弹窗逻辑这一步. 虽然写逻辑不麻烦, 但是每次写也蛮浪费时间.
- 可以允许我快速切换弹窗样式, 就比如说项目 abc 都是不同的弹窗样式, 但是有了这种方式, 我可以完全快速的 切换样式, 这样节省时间. 效率高, 效率高很重要的.
dialog 不适合这种方式, 考虑一些情况:
- dialog 如果有一个复杂的数据源, 那么就意味着调用的时候要传递一堆参数;
- 如果 dialog 里面还有交互呢, 比如分页, 点击下一页, 那么是在 dialog 里面发送请求, 还是让 父组件发送请求(而这里实际上没有父组件的概念)
所以对于有复杂交互, 超过了基本类型的弹窗的 dialog, 我想着是不是换一种思路: 给一个 dialog 的模板, 用户可以把模板代码拷贝到需要使用 dialog 的 .vue 中 (拷贝也比重复写好) 这样 dialog
- 基础的样式已经有了, 比如说 mask
- 动画效果也有了, 不需要用户再自己写 -- 少写一点也是追求.
toast 的简单模式就是一个文本, 复杂点就是一个带图标的. 带图标的 toast 一般因为图标是跟随项目变化的, 所以我们做一堆内置的图标也不太好. 所以就要放开 toast 的图标路径配置. 但是这个玩意实际上不应该给用户像基本类型一样去复写, 因为没有这个必要. toast 的样式要是变了, 和 alert 有啥区别, 还不如复写一个 alert。