处理 Element UI 中Popover组件会在页面中出现多个的情况

前言：今天有一个需求，一个列表中每一行都会有一个element-ui的 popover 弹窗，使用click或者hover触发；但是，这个组件自身不会自动关闭，处理手动点击页面其他地方。使用需要对这一现象进行处理，使用 doClose() 方法。

 

第一步：给每一个el-popover标签添加一个key唯一标识的ref

第二步：在每次点击、hover触发el-popover时（click事件添加在触发el-popover组件的按钮上），遍历页面中所有的refs，把带有 "popover-" 的ref 拿出来，并调用它自身的 doClose 方法（这个方法在官方文档上没有，可以去看源码）

closePopover(index, item) { //每次只显示一个Popover弹窗 使用doClose()
    // 遍历所有的refs，判断索引名中是否有 'popover-' ;如果有，都使用doClose关掉
    for (const key in this.$refs) {
        if (key.indexOf('popover-') !== -1) {
            this.$refs[key].doClose();
        }
    }
}

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！