el-popover 实现1个组件在页面上复用

个人需求：

点击dom展示出该行数据的详细信息。

解决方案：

使用element ui的对话框组件或者弹出框组件。

疑问：

element ui官方文档上的弹出框组件针对于每个dom都需要套一个。这个太蠢了，忍不住

重点：

pop组件中有一个referenceElm属性可以调整关联的dom元素（就是希望点击哪个dom出现弹层的那个dom）

// 组件配置
<el-popover
        ref="accessPopover"
        placement="top-start"
        popper-class="access-detail-section"
        trigger="click"
        width="400"
        title="详细信息"
        :visible-arrow="false"
      ></el-popover>
// 方法
openDetail(item) {
      this.selectedAccessData = item
      let dom = this.$refs['accessPopover']
      dom.referenceElm = window.event.target
      dom.createPopper() // 这个是必须的，不然是不会进行重新计算的
      dom.doShow()
      // Object(dom_["on"])(document, 'click', this.handleDocumentClick);
},

一般到这里就结束了，想要的效果也就有了。
但是如果有人找茬，希望在点击body的时候可以关闭这个组件（上述方法由于没有相对可定位的dom，所以界面上是没有绑定任何事件的）
组件本身会提供handleDocumentClick方法，只需要将这个方法在界面上进行绑定，同时修改组件配置中的reference属性（:reference=“selectedDom”，selectedDom实际上就是window.event.target）