Vue构建思路整理之一--弹出层组建的创建

最近做一个前端项目,基本完成,到了优化阶段了,整理一下项目经验。

对于项目中的小组件,例如弹出的提示语等,显然是要统一调用的。但是细做起来,居然也有这么多差别。我把这些提示的小组件,分为如下几种:

1.黑透自动关闭;2.对话框单按钮;3.对话框双按钮;4.对话框带输入框/内容分发;其中,前三个是木偶组建,后面这个应该称为智能组件。

1.黑透自动关闭:

顾名思义,就是做一个黑透,然后将内容文字用props传入子组件,然后展示出来。这里我最开始只做了一个text的传值,后来由于项目需要,又附加了一个时间的传值,然后给一个默认时间值,有时候项目需要调整黑透的消失时间。在父组件创建一个v-if 来控制是否显示,子组件一个setTimeout用$emit触发一个父组件的close事件,关闭tips。这也是vue组件控制最简单的一个逻辑了。听起来顺理成章,但实际操作起来却还有麻烦的地方。我做一个提示组件,想达到的效果是,我需要它的时候,它弹出来提示一下。然后自己消失。但是我在父组件却必须要跟着加上一个关闭v-if条件的事件供提示组建调用。这是我觉得很不爽的地方。这个methods里面的closeTips方法,我根本不会用,但必须得在每个父组件都加上,只为了提供给这个提示组建调用。。。

后来想了想,直接在提示组件多加了一层display的控制,虽然看起来也没那么完美,但至少不用再每个父组件都添加一个方法。

2.对话框按钮

这就是弹出一个对话框,上面一段文字,下面一个确定按钮。比上一个黑透提示更正式了一些。这个组件的问题在于,对话框下一层有一个全屏的黑透。我希望这个黑透有一个透明的渐变的感觉,不然太生硬。这里用到了一个小技巧。就是用css的transition+visibility+opacity配合起来达到这样一个效果。因为对于display的元素,transition是失效的。

3.对话框带双按钮

这个跟单按钮区别不大,唯一的区别是,子组件需要绑定两个触发事件,一个触发取消关闭,另一个触发确定按钮进行进一步的操作。

4.对话框带输入框/内容分发

这个组件涉及到把子组件的内容回传回来。上面三个方式,都是木偶组建,功能很单一,接收数据然后展示出来。但是带输入框这种,就相对麻烦了一些。因为样式比较多,有的需要校验手机号,有的还需要发送验证码等待。我最开始是用内容分发的方式,统一起来。涉及到校验或者前后端通信的,全都在子组件内部自己完成。留给父组件的,就只剩一个开启关闭按钮。但是这样有一个缺点,就是子组件会非常繁杂。因为内容分发进来之后,这个子组件可能获取到一个需要校验电话号码的input,也可能是一个手机号+验证码的绑定,最后写着写着,都感觉是在给自己找罪受。所幸就把功能相同的,进行了统一。不同功能的,写进了不同的组件。感觉功能相似的组件,统一起来,是个很好的习惯。但是也没有必要为了统一而统一,这样反而成了累赘。

随机浏览