Commit 48a92de8 authored by liupengfei's avatar liupengfei

Add README.md

parents
Pipeline #262589 canceled with stages
# 在vue里面开始尝试设计一个通用的弹层组件
# 为什么要实现他 或者 做他的目的
1. 快速开发
2. 统一的方式更容易维护或者理解
## 不考虑细节问题,先大概想想怎么实现 (能不能做?)
0. 通常弹层的样子大致什么样子?(弹层内容,关闭按钮,背景颜色)
1. 怎么让使用者使用(让使用者引入 modal组件, 然后传递props 通过$emit事件,告诉调用者)
理论上应该是可以做的出来的,不考虑细节问题的话,实现就很简单啦。。
## 我做出来的这个组件为什么能方便其他人?(能不能实现的更好)
0. 仔细想项目中或者当前业务中,通常一个推啊广告弹层,或者创新的弹层长什么样子。
* 将所有共有的地方抽离出来
* 对于稍微特殊的地方,也能有支持
* 对于更加特殊的地方,让开发者能够有机会让开发者二次开发。
如果能实现上面的要求,再辅助比较好的api。那么,应该就以后都可以方便的使用了。
## 细节问题。
1. 组件的粒度要支持到哪里?
考虑到推啊各种弹层有的没有标题,有的有标题,甚者有的标题和内容区域从样式上来说,没有特殊的边界,图片居多。
所以,可以只支持到 (弹层内容,关闭按钮, 背景颜色)
这样子一想,感觉这个弹层确实很简单
```
<div>
<div class="bg"></div>
<div class="content">
<slot></slot>
</div>
<div class="close"></div>
</div>
```
完事了。
但是
1. 弹层bg的过渡效果,不可能次次都让开发者想办法去手写吧? 比如opacity,弹层整体从上往下进去,从左往右进入。。。
2. 弹层的内容是不是也有过渡,通常内容区域经常要 从中心 从小变大 进入,或者其他过渡效果。。
所以。要内置几个通用的过渡动画效果,对于用户自定义的动画效果,要能通过传递props给用户执行掉。 并且暴露相关的事件,以便用户在合适的时机做合适的事情。
2. 倒计时问题
我们现在的弹层可能是推啊独有的,会有确定倒计时这个问题。 那么假如封装进来,应该也可。
需要考虑的问题是, 倒计时什么时候开始, 什么时候结束
比如可以支持到,组件内容过渡完结后两秒钟开始执行倒计时。或者立即执行倒计时,或者在组件展示的时候就执行倒计时。
倒计时什么时候清除?
3. 关闭按钮什么时候出现, 关闭按钮的位置是和content 相关还是在页面中决对定位?
4. 异步组件? 用户可能在modal内部封装了一个异步操作,比如一个广告券, 是否可以支持,有一个通用的loading状态?
5. 滚动问题
当前弹窗展示的时候,肯定是不想让用户能够滚动,这个处理应该怎么处理?
6. 当页面上有多个modal的时候,层级问题? 有没有办法控制?有没有办法只显示一个?
7. 如果有多种弹窗,比如一个页面上有n多modal.
```
// modal1
<Modal>
<div>1</div>
</Modal>
// modal2
<Modal>
<div>2</div>
</Modal>
// modal3
<Modal>
<div>3</div>
</Modal>
<div>
<modal1 />
<modal2 />
<modal3 />
</div>
```
其中的modal均为用户扩展你写的modal组件 写的, 有没有可以让用户直接唤起 modal的可能。
比如通过
```
this.$modal.show('modal1')
```
这样做有什么好处么?
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment