背景
前一阵做了一个需求，需要用popover组件嵌套popover组件来实现。先看下效果图：
完整代码地址
为了整理这个问题，我特意实现了个小demo，完整代码都在github上面，有需要的的小伙伴可以直接去下载下来运行
github仓库地址
项目运行依赖的node版本为:^14.17.6
问题描述
功能实现完，发现有个bug。展开第一级的popover列表后，点击列表中的任意一行，显示每一行数据的详情卡片，切换点击不同的行，详情卡片不会消失，一直存在。效果图如下：
解决方案
popover组件是添加到body上面的，无论是一级还是二级popover，在body上都是平级的，无法区分开。
我的解决方案：
- 每条数据都会有一个唯一的ID，将这个ID设置到二级popover组件上,作为ref属性存在。
- 利用vuex存储当前点击的ID和上一次点击的ID，分别为curId和preId。
- 每当点击列表的某一行时，先从vuex中获取curId，然后赋值给preId，再将点击的ID赋值给curId。
- 用watch监听curId，然后通过
this.$refs查找上一个popover是否存在，若存在，则调用popover自带的doClose方法，关闭即可。
代码实现
vuex部分
二级popover组件部分代码
js代码
dom代码
在popover组件的dom上，设置ref属性，拼接ID，通过触发点击事件handleChange，记录当前点击项的ID。
数据
通过两层for循环，造了一个mock数据，下面是mock数据生成的代码
到这里就完美解决了, 上面的代码是解决这个问题的核心代码，真正的业务里面比这复杂一些，需要考虑到滑动等等问题，但是原理差不多。
原文链接：https://juejin.cn/post/7327093937143103522 作者：娜个小部呀
