关于vue.js弹窗组件的知识点总结

首先在开发时需要考虑以下三点:

     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 的 mixins 机制，将这些弹出层的公共逻辑封装层一个 mixin ，每个弹出框组件直接引用就好。

vue-popup-mixin

明确了上述所有的问题，开始开发 mixin, 首先需要一个 overlay (遮盖层组件) ;

<template> <div class="overlay" @click="handlerClick" @touchmove="prevent" :style="style" transition="overlay-fade"></div></template><script>export default { props: { onClick: {  type: Function }, opacity: {  type: Number,  default: 0.4 }, color: {  type: String,  default: '#000' } }, computed: { style () {  return {  'opacity': this.opacity,  'background-color': this.color  } } }, methods: { prevent (event) {  event.preventDefault()  event.stopPropagation() }, handlerClick () {  if (this.onClick) {  this.onClick()  } } }}</script><style lang="less">.overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #000; opacity: .4; z-index: 1000;}.overlay-fade-transition { transition: all .3s linear; &.overlay-fade-enter, &.overlay-fade-leave { opacity: 0 !important; }}</style>