el-popover嵌套时,打开内部的popover后,点击外部popover的空白部分无法将内部popover关闭
在项目开发中我们经常会碰到这种情况,列表表格当中嵌套的某一项点击时会弹出弹出框例如下图这种情况:
文章图片
这种表格嵌套弹出框的一般没有什么问题,也很简单,但是最近在开发中却遇到了这样一种情况,点击列表中的某一项会弹出弹框,弹框中嵌套的是表格,表格中的列又可以点击弹出弹框,具体情况如下便的图所示:
文章图片
表格中有两列是可以在点开的
文章图片
那么这时候就遇到了一个问题,每次点击一个新的弹框,之前打开的弹框不会关闭,而且点击弹框以外的其他空白部分弹框也关不了,这个问题怎么解决呢?在网上搜了一圈发现相关文章较少,只发现了两篇:
https://blog.csdn.net/qq_40544434/article/details/115627828
https://www.cnblogs.com/workJiang/p/14550791.html
所以我决定把自己这个问题记录一下
解决弹框无法正常关闭的总体思路就是使用它自带的doClose()方法,至于为什么会造成这种弹框无法关闭的现象,我也不太清楚,下边是我的大致解决过程
1、首先给每一个弹框一个独一无二的ref(也可以给他们统一的ref,我感觉我这里不适合使用统一的解决,就用了下面的方法)
placement="right"
@show="getBagcount(scope)">
placement="right"
@show="getBusinessList(scope)">
{{ scope.row.business_count }}
2、点击按钮获取对应的子组件,阻止冒泡,并获取到所有的popover
获取所有的popover的函数
getRefs() {
let obj = this.$refs
this.bagRefs = []
this.sysRefs = []
for (let key in obj) {
if (key.slice(0, key.length - 1) == 'popverbag') {
this.bagRefs.push(obj[key])
}
if (key.slice(0, key.length - 1) == 'popoverSys') {
this.sysRefs.push(obj[key])
}
}
return [this.bagRefs, this.sysRefs]
},
getBagcount(scope) {
let rowRef = 'bagsTree' + scope.$index
this.$nextTick(() => {
this.$refs[rowRef].getBags(scope.row)
})//获取对应子组件
var e = window.event || arguments.callee.caller.arguments[0]
e.stopPropagation()//组织冒泡
let list = this.getRefs()//获取popover
console.log(list)
list[1].forEach((item, index) => item.doClose())//点击当前列,其他列的弹框需关闭
list[0].forEach((item, index) => {
if (index != scope.$index) {//判断当前点击的弹框是哪一个,关闭其他的弹框
item.doClose()
}
})
},
【el-popover嵌套时,打开内部的popover后,点击外部popover的空白部分无法将内部popover关闭】3、以上操作可以关掉其他弹框,却依旧不能在点击弹框外的空白部分将弹框关闭,这时就需要在外层的表格中添加一个函数
closeAll() {
let obj = this.$refs
for (let key in obj) {
if (
key.slice(0, key.length - 1) == 'popverbag' ||
key.slice(0, key.length - 1) == 'popoverSys'
) {
obj[key].doClose()
}
}
},
点击表格其他部分关闭当前点开的弹框
推荐阅读
- 任时光绽放成六月繁花
- 一个人的碎碎念
- 昨夜小楼听风
- 20170612时间和注意力开销记录
- 远去的风筝
- 为什么你的路演总会超时()
- 杜月笙的口才
- 时间老了
- MediaRecorder前后摄像头同时录像
- 眉头开了