首先在开发时需要考虑以下三点:
1、进入和弹出的动画效果。
2、z-index 的控制
3、overlay 遮盖层
关于动画
vue 对于动画的处理相对简单，给组件加入css transition 动画即可
<template>
<div class="modal" transition="modal-scale">
<!--省略其它内容-->
</div>
</template>
<script>
// ...
</script>
<style>
.modal-scale-transition{
transition: transform,opacity .3s ease;
}.modal-scale-enter,
.modal-scale-leave {
opacity: 0;
}
.modal-scale-enter {
transform: scale(1.1);
}
.modal-scale-leave {
transform: scale(0.8);
}
</style>
外部可以由使用者自行控制，使用
v-if 或是
v-show 控制显示z-index 的控制
关于
z-index的控制，需要完成以下几点1、保证弹出框的
z-index 足够高能使 其再最外层2、后弹出的弹出框的
z-index 要比之前弹出的要高要满足以上两点， 我们需要以下代码实现
const zIndex = 20141223 // 先预设较高值const getZIndex = function () {
return zIndex++ // 每次获取之后 zindex 自动增加
}
然后绑定把
z-index 在组件上
<template>
<div class="modal" :style="{'z-index': zIndex}" transition="modal-scale">
<!--省略其它内容-->
</div>
</template>
<script>
export default {
data () {
return {
zIndex: getZIndex()
}
}
}
</script>overlay 遮盖层的控制
遮盖层是弹窗组件中最难处理的部分, 一个完美的遮盖层的控制需要完成以下几点:
1、遮盖层和弹出层之间的动画需要并行
2、遮盖层的
z-index 要较小与弹出层3、遮盖层的弹出时需要组件页面滚动
4、点击遮盖层需要给予弹出层反馈
5、保证整个页面最多只能有一个遮盖层（多个叠在一起会使遮盖层颜色加深）
为了处理这些问题，也保证所有的弹出框组件不用每一个都解决，所以决定利用 vue 的
