关于element-ui组件popover嵌套使用后二级弹框无法消失问题的解决方案

背景

前一阵做了一个需求,需要用popover组件嵌套popover组件来实现。先看下效果图:

完整代码地址

为了整理这个问题,我特意实现了个小demo,完整代码都在github上面,有需要的的小伙伴可以直接去下载下来运行 github仓库地址

项目运行依赖的node版本为:^14.17.6

问题描述

功能实现完,发现有个bug。展开第一级的popover列表后,点击列表中的任意一行,显示每一行数据的详情卡片,切换点击不同的行,详情卡片不会消失,一直存在。效果图如下:

解决方案

popover组件是添加到body上面的,无论是一级还是二级popover,在body上都是平级的,无法区分开。

我的解决方案:

  1. 每条数据都会有一个唯一的ID,将这个ID设置到二级popover组件上,作为ref属性存在。
  2. 利用vuex存储当前点击的ID和上一次点击的ID,分别为curId和preId。
  3. 每当点击列表的某一行时,从vuex中获取curId,然后赋值给preId,再将点击的ID赋值给curId。
  4. 用watch监听curId,然后通过this.$refs查找上一个popover是否存在,若存在,则调用popover自带的doClose方法,关闭即可。

代码实现

vuex部分

二级popover组件部分代码

js代码

dom代码

在popover组件的dom上,设置ref属性,拼接ID,通过触发点击事件handleChange,记录当前点击项的ID。

数据

通过两层for循环,造了一个mock数据,下面是mock数据生成的代码

到这里就完美解决了, 上面的代码是解决这个问题的核心代码,真正的业务里面比这复杂一些,需要考虑到滑动等等问题,但是原理差不多。

相关推荐
婉婉耶8 分钟前
VUE带你乘风破浪~
前端·vue.js
乌兰麦朵1 小时前
Vue吹的颅内高潮,全靠选择性失明和 .value 的PUA!
前端·vue.js
Goodbaibaibai1 小时前
创建一个简洁的Vue3 + TypeScript + Vite + Pinia + Vue Router项目
javascript·vue.js·typescript
流星稍逝1 小时前
用vue3的写法结合uniapp在微信小程序中实现图片压缩、调整分辨率、做缩略图功能
前端·vue.js
OEC小胖胖1 小时前
深入理解 Vue.js 响应式原理及其在 Web 前端开发中的应用
开发语言·前端·javascript·vue.js·web
拾光拾趣录2 小时前
Vue依赖收集机制:响应式原理的核心实现
前端·vue.js
雲墨款哥2 小时前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
独立开阀者_FwtCoder2 小时前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
编程猪猪侠2 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
江城开朗的豌豆3 小时前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js