antv g6中添加一个el-popover

问题背景：

想要在antv G6中自定义的节点上面去添加一个点击事件，点击后出现一个popover框（文本确认框）然后进行将这个节点添加到一个列表类似的操作

问题分析

g6中只有默认的tooltip没有popover类似的带有操作性的悬窗，于是想直接采用element的el-popover提示框算了

实现步骤

想节点上悬浮一个操作框，能否直接引入el-popover，引入之后怎么让他始终处于节点方位呢？审查元素发现一般el-popover都是采用的绝对定位的形式，那么我们可否设置一个动态的top和left呢，接下来按照这个思路进行尝试

1.一开始的时候，单纯使用el-popover默认的class进行dom获取，发现行不通

bindEvents() {
      this.graph.on('node:click', (e) => {
        if (item._cfg.model.isCenter === 'Y') {
          this.addtoList(item)
        }
      })
    },
    addtoList(item, clientX, clientY, canvasX, canvasY) {
      // alert(111)
      this.showPo = true
      const oo = item._cfg.model
      const result = document.getElementsByClassName('el-popover')[0]
    }

2.然后又查阅官方文档发现这

也就是如果不加这个自定义class el-popover是不支持自己定义样式的，于是给他加上这个自定义的class后，通过这一句 const result = document.getElementsByClassName('el-popover popverClass')[0]就可以获取到正确的dom了

    <el-row>
          <div id="graph">
            <el-popover
              v-model="showPo"
              popper-class="popverClass"
              width="160">
              <p>确定要添加节点到列表中吗?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="showPo = false">cancel</el-button>
                <el-button type="primary" size="mini" @click="addtoCon">confirm</el-button>
              </div>
            </el-popover>
          </div>
        </el-row>

然后进行top，left的设置查阅g6相关的坐标系解读文章 g6.antv.vision/zh/docs/man… 分析了下可以采用canvas坐标的形式因为这种方式基本上可以是可以跟节点的坐标进行同步的，且窗口的放大缩小不会影响这个悬浮框的位置，于是最终实现：

 bindEvents() {
      this.graph.on('node:click', (e) => {
        const { clientX, clientY, item, canvasX, canvasY } = e;
        console.log('iii', item, clientX, clientY, canvasX, canvasY)
        if (item._cfg.model.isCenter === 'Y') {
          this.addtoList(item, clientX, clientY, canvasX, canvasY)
        }
      })
    },
    addtoList(item, clientX, clientY, canvasX, canvasY) {
      this.showPo = true
      const oo = item._cfg.model
      // el-popover相对于画布进行定位
      const result = document.getElementsByClassName('el-popover popverClass')[0]
      result.style.left = (canvasX - 50) + 'px'
      result.style.top = (canvasY + 35) + 'px'
      this.knowsInfo = oo
    }