<template><div class="modal" transition="modal-scale"> <!--省略其它內(nèi)容--></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>

const zIndex = 20141223 // 先預(yù)設(shè)較高值const getZIndex = function () { return zIndex++ // 每次獲取之后 zindex 自動(dòng)增加}

<template><div class="modal" :style="{'z-index': zIndex}" transition="modal-scale"> <!--省略其它內(nèi)容--></div></template><script>export default { data () {  return {   zIndex: getZIndex()  } }}</script>

<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>

import Vue from 'vue'import overlayOpt from '../overlay' // 引入 overlay 組件const Overlay = Vue.extend(overlayOpt)const getDOM = function (dom) { if (dom.nodeType === 3) { dom = dom.nextElementSibling || dom.nextSibling getDOM(dom) } return dom}// z-index 控制const zIndex = 20141223 const getZIndex = function () { return zIndex++ }// 管理const PopupManager = { instances: [], // 用來(lái)儲(chǔ)存所有的彈出層實(shí)例 overlay: false, // 彈窗框打開(kāi)時(shí) 調(diào)用此方法 open (instance) { if (!instance || this.instances.indexOf(instance) !== -1) return  // 當(dāng)沒(méi)有遮蓋層時(shí)，顯示遮蓋層 if (this.instances.length === 0) {  this.showOverlay(instance.overlayColor, instance.overlayOpacity) } this.instances.push(instance) // 儲(chǔ)存打開(kāi)的彈出框組件 this.changeOverlayStyle() // 控制不同彈出層 透明度和顏色  // 給彈出層加上z-index const dom = getDOM(instance.$el) dom.style.zIndex = getZIndex() }, // 彈出框關(guān)閉方法 close (instance) { let index = this.instances.indexOf(instance) if (index === -1) return  Vue.nextTick(() => {  this.instances.splice(index, 1)    // 當(dāng)頁(yè)面上沒(méi)有彈出層了就關(guān)閉遮蓋層  if (this.instances.length === 0) {  this.closeOverlay()  }  this.changeOverlayStyle() }) }, showOverlay (color, opacity) { let overlay = this.overlay = new Overlay({  el: document.createElement('div') }) const dom = getDOM(overlay.$el) dom.style.zIndex = getZIndex() overlay.color = color overlay.opacity = opacity overlay.onClick = this.handlerOverlayClick.bind(this) overlay.$appendTo(document.body) // 禁止頁(yè)面滾動(dòng) this.bodyOverflow = document.body.style.overflow document.body.style.overflow = 'hidden' }, closeOverlay () { if (!this.overlay) return document.body.style.overflow = this.bodyOverflow let overlay = this.overlay this.overlay = null overlay.$remove(() => {  overlay.$destroy() }) }, changeOverlayStyle () { if (!this.overlay || this.instances.length === 0) return const instance = this.instances[this.instances.length - 1] this.overlay.color = instance.overlayColor this.overlay.opacity = instance.overlayOpacity }, // 遮蓋層點(diǎn)擊處理，會(huì)自動(dòng)調(diào)用 彈出層的 overlayClick 方法 handlerOverlayClick () { if (this.instances.length === 0) return const instance = this.instances[this.instances.length - 1] if (instance.overlayClick) {  instance.overlayClick() } }}window.addEventListener('keydown', function (event) { if (event.keyCode === 27) { // ESC if (PopupManager.instances.length > 0) {  const topInstance = PopupManager.instances[PopupManager.instances.length - 1]  if (!topInstance) return  if (topInstance.escPress) {  topInstance.escPress()  } } }})export default PopupManager

import PopupManager from './popup-manager'export default { props: { show: {  type: Boolean,  default: false }, // 是否顯示遮蓋層 overlay: {  type: Boolean,  default: true }, overlayOpacity: {  type: Number,  default: 0.4 }, overlayColor: {  type: String,  default: '#000' } }, // 組件被掛載時(shí)會(huì)判斷show的值開(kāi)控制打開(kāi) attached () { if (this.show && this.overlay) {  PopupManager.open(this) } }, // 組件被移除時(shí)關(guān)閉 detached () { PopupManager.close(this) }, watch: { show (val) {  // 修改 show 值是調(diào)用對(duì)于的打開(kāi)關(guān)閉方法  if (val && this.overlay) {  PopupManager.open(this)  } else {  PopupManager.close(this)  } } }, beforeDestroy () { PopupManager.close(this) }}

<template> <div class="dialog" v-show="show" transition="dialog-fade"> <div class="dialog-content">  <slot></slot> </div> </div></template><style> .dialog { left: 50%; top: 50%; transform: translate(-50%, -50%); position: fixed; width: 90%; } .dialog-content { background: #fff; border-radius: 8px; padding: 20px; text-align: center; } .dialog-fade-transition { transition: opacity .3s linear; } .dialog-fade-enter, .dialog-fade-leave { opacity: 0; }</style><script>import Popup from '../src'export default { mixins: [Popup], methods: { // 響應(yīng) overlay事件 overlayClick () {  this.show = false }, // 響應(yīng) esc 按鍵事件 escPress () {  this.show = false } }}</script>