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

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

1、进入和弹出的动画效果。

2、z-index 的控制

3、overlay 遮盖层

关于动画

vue 对于动画的处理相对简单，给组件加入css transition 动画即可

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

z-index 的控制

关于z-index的控制，需要完成以下几点 1、保证弹出框的 z-index 足够高能使其再最外层

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

要满足以上两点，我们需要以下代码实现

const getZIndex = function () {
return zIndex++ // 每次获取之后 zindex 自动增加
}

然后绑定把 z-index 在组件上

overlay 遮盖层的控制

遮盖层是弹窗组件中最难处理的部分,一个完美的遮盖层的控制需要完成以下几点:

1、遮盖层和弹出层之间的动画需要并行

2、遮盖层的 z-index 要较小与弹出层

3、遮盖层的弹出时需要组件页面滚动

4、点击遮盖层需要给予弹出层反馈

5、保证整个页面最多只能有一个遮盖层（多个叠在一起会使遮盖层颜色加深）

为了处理这些问题，也保证所有的弹出框组件不用每一个都解决，所以决定利用 vue 的 mixins 机制，将这些弹出层的公共逻辑封装层一个 mixin ，每个弹出框组件直接引用就好。

vue-popup-mixin

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

然后需要一个 js 来管理 overlay 的显示和隐藏。

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

export default {
props: {
show: {
type: Boolean,default: false
},// 是否显示遮盖层
overlay: {
type: Boolean,default: true
},overlayOpacity: {
type: Number,overlayColor: {
type: String,// 组件被挂载时会判断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来加载即可

总结

以上就是关于vue.js弹窗组件的一些知识点，希望对大家的学习或者工作带来一定的帮助，如果大家有疑问可以留言交流，谢谢大家对编程之家的支持。