快捷導(dǎo)航

關(guān)于vue.js彈窗組件的知識(shí)點(diǎn)總結(jié)

更新時(shí)間：2016年09月11日 16:32:21 作者：myron

最近在開(kāi)發(fā)過(guò)程對(duì)對(duì)于組件化的開(kāi)發(fā)有一些感想，于是開(kāi)始記錄下這些。彈窗組件一直是 web 開(kāi)發(fā)中必備的，使用頻率相當(dāng)高，最常見(jiàn)的莫過(guò)于 alert，confirm和prompt這些,不同的組件庫(kù)對(duì)于彈窗的處理也是不一樣的，下面來(lái)一起看看吧。

首先在開(kāi)發(fā)時(shí)需要考慮以下三點(diǎn):

1、進(jìn)入和彈出的動(dòng)畫(huà)效果。

2、z-index 的控制

3、overlay 遮蓋層

關(guān)于動(dòng)畫(huà)

vue 對(duì)于動(dòng)畫(huà)的處理相對(duì)簡(jiǎn)單，給組件加入css transition 動(dòng)畫(huà)即可

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

外部可以由使用者自行控制，使用 v-if 或是 v-show 控制顯示

z-index 的控制

關(guān)于z-index的控制，需要完成以下幾點(diǎn)
1、保證彈出框的 z-index 足夠高能使其再最外層

2、后彈出的彈出框的 z-index 要比之前彈出的要高

要滿足以上兩點(diǎn)，我們需要以下代碼實(shí)現(xiàn)

const zIndex = 20141223 // 先預(yù)設(shè)較高值

const getZIndex = function () {
 return zIndex++ // 每次獲取之后 zindex 自動(dòng)增加
}

然后綁定把 z-index 在組件上

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

overlay 遮蓋層的控制

遮蓋層是彈窗組件中最難處理的部分, 一個(gè)完美的遮蓋層的控制需要完成以下幾點(diǎn):

1、遮蓋層和彈出層之間的動(dòng)畫(huà)需要并行

2、遮蓋層的 z-index 要較小與彈出層

3、遮蓋層的彈出時(shí)需要組件頁(yè)面滾動(dòng)

4、點(diǎn)擊遮蓋層需要給予彈出層反饋

5、保證整個(gè)頁(yè)面最多只能有一個(gè)遮蓋層（多個(gè)疊在一起會(huì)使遮蓋層顏色加深）

為了處理這些問(wèn)題，也保證所有的彈出框組件不用每一個(gè)都解決，所以決定利用 vue 的 mixins 機(jī)制，將這些彈出層的公共邏輯封裝層一個(gè) mixin ，每個(gè)彈出框組件直接引用就好。

vue-popup-mixin

明確了上述所有的問(wèn)題，開(kāi)始開(kāi)發(fā) mixin, 首先需要一個(gè) 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>

然后需要一個(gè) js 來(lái)管理 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: [], // 用來(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

最后再封裝成一個(gè) 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'
 }
 },
 // 組件被掛載時(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)
 }
}

使用

以上所有的代碼就完成了所有彈出層的共有邏輯，使用時(shí)只需要當(dāng)做一個(gè)mixin來(lái)加載即可

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

總結(jié)

以上就是關(guān)于vue.js彈窗組件的一些知識(shí)點(diǎn)，希望對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助，如果大家有疑問(wèn)可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: