Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
S
simple-modal
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
liupengfei
simple-modal
Commits
48a92de8
Commit
48a92de8
authored
Jun 15, 2020
by
liupengfei
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add README.md
parents
Pipeline
#262589
canceled with stages
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
116 additions
and
0 deletions
+116
-0
README.md
README.md
+116
-0
No files found.
README.md
0 → 100644
View file @
48a92de8
# 在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')
```
这样做有什么好处么?
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment