在平时开发当中，可能会遇到这样的需求：我在某一特定位置点击元素，当前点击位置出现弹出框，且弹出框可跟随鼠标滚动而移动。

例如当我点击下图“眼睛”图标时，要在点击位置弹出一个框，显示点击的该条数据内容。并且当我滚动鼠标时，该弹出框会随着“眼睛”一起移动，相对位置不变。
如下图所示：

• 方法一：

（1）首先给弹出框绑定一个动态top以及left值

代码如下：

<span
:style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
>
</span>

（2）获取到点击的元素坐标值

代码如下：

// 点击的眼睛元素
<img
  @click.stop="showYearData"
  src="../../dmeo/dmeo/eyes.png" // 眼睛图标
  alt="eyes"
/>
// 方法：点击眼睛，获取坐标
 showYearData(e) {
   this.showPositionTop = e.y || 0; // 弹出框上边距
   this.showPosition = this.showPositionTop; // 定义个变量保留弹出框初始时上边距，后面鼠标滚动时将使用
   this.showPositionLeft = e.x - 185 || 0; // 弹出框左边距，根据位置适当加减
 },

（3）给表格所在元素，设一个滚动事件：

// 可以滚动的父元素
<div @scroll="scrollShowData">
</div>
// 获取滚动距离
scrollShowData(e) {
  // 让鼠标滚动时，弹出框上边距等于点击时原始上边距减去滚动时上边距
  this.showPositionTop = this.showPosition - e.target.scrollTop;
},

• 方法二：

直接使用UI框架的气泡卡片。

因该项目UI框架是iview，所以可直接使用iview的poptip-气泡提示，再使用slot插槽，进行样式的完善。同样可以实现想要的效果。