首先在開發時需要考慮以下三點:
1、進入和彈出的動畫效果。
2、z-index 的控制
3、overlay 遮蓋層
關於動畫
vue 對於動畫的處理相對簡單，給組件加入css transition 動畫即可
<template><div 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 :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 @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>然後需要一個js 來管理overlay的顯示和隱藏。
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: [], // 用來儲存所有的彈出層實例overlay: false, // 彈窗框打開時調用此方法open (instance) { if (!instance || this.instances.indexOf(instance) !== -1) return // 當沒有遮蓋層時，顯示遮蓋層if (this.instances.length === 0) { this.showOverlay(instance.overlayColor, instance.overlayOpacity) } this.instances.push(instance) // 儲存打開的彈出框組件this.changeOverlayStyle() // 控制不同彈出層透明度和顏色// 給彈出層加上z-index const dom = getDOM(instance.$el) dom.style.zIndex = getZIndex() }, // 彈出框關閉方法close (instance) { let index = this.instances.indexOf(instance) if (index === -1) return Vue.nextTick(() => { this.instances.splice(index, 1) // 當頁面上沒有彈出層了就關閉遮蓋層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) // 禁止頁面滾動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 }, // 遮蓋層點擊處理，會自動調用彈出層的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最後再封裝成一個mixin
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' } }, // 組件被掛載時會判斷show的值開控制打開attached () { if (this.show && this.overlay) { PopupManager.open(this) } }, // 組件被移除時關閉detached () { PopupManager.close(this) }, watch: { show (val) { // 修改show 值是調用對於的打開關閉方法if (val && this.overlay) { PopupManager.open(this) } else { PopupManager.close(this) } } }, beforeDestroy () { PopupManager.close(this) }}使用
以上所有的代碼就完成了所有彈出層的共有邏輯， 使用時只需要當做一個mixin來加載即可
<template> <div v-show="show" transition="dialog-fade"> <div> <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: { // 響應overlay事件overlayClick () { this.show = false }, // 響應esc 按鍵事件escPress () { this.show = false } }}</script>總結
以上就是關於vue.js彈窗組件的一些知識點，希望對大家的學習或者工作帶來一定的幫助，如果大家有疑問可以留言交流，謝謝大家對武林網的支持。