關於vue.js彈窗組件的知識點總結

首先在開發時需要考慮以下三點:

     1、進入和彈出的動畫效果。

     2、z-index 的控制

     3、overlay 遮蓋層

rr

🜎

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

z-index 的控制

關於z-index的控制，需要完成以下幾點

     1、確保彈出框足夠的 z-index   高能量使其再最外層

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

要滿足以上兩點，我們需要以下程式碼實現

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

要滿足以上兩點，然後再綁定把 z-index 在組件上

const zIndex = 20141223 // 先预设较高值
 
const getZIndex = function () {
 return zIndex++ // 每次获取之后 zindex 自动增加
}

overlay 遮蓋層的控制

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

🠎 、遮蓋層與彈出層之間的動畫需要並行

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

     層需要給予彈出層回饋

     5.確保整個頁面最多只能有一個遮蓋層（多個疊在一起會使遮蓋層顏色加深）

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

vue-popup-mixin

明確了上述所有的問題，開始開發 mixin, 首先需要一個 overlay (遮蓋層組件) ;

<template>
<div class="modal" :style="{&#39;z-index&#39;: zIndex}" transition="modal-scale">
 <!--省略其它内容-->
</div>
</template>
<script>
export default {
 data () {
  return {
   zIndex: getZIndex()
  }
 }
}
</script>

🠎 需要一個 js

<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: &#39;#000&#39;
 }
 },
 computed: {
 style () {
  return {
  &#39;opacity&#39;: this.opacity,
  &#39;background-color&#39;: 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>

最後再封裝成一個mixin

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

  

使用

ee

總結

以上就是關於vue.js彈窗組件的一些知識點，希望對大家的學習或工作帶來一定的幫助，如果大家有疑問可以留言交流，謝謝大家對PHP中文網的支持。

更多關於vue.js彈窗組件的知識點總結相關文章請關注PHP中文網！