Vue、JS点击元素，该位置出现弹出框，且可跟鼠标滚动而移动

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

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

方法一：

（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插槽，进行样式的完善。同样可以实现想要的效果。