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

短命女 2022-10-16 06:07 36阅读 0赞

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

**例如当我点击下图“眼睛”图标时，要在点击位置弹出一个框，显示点击的该条数据内容。并且当我滚动鼠标时，该弹出框会随着“眼睛”一起移动，相对位置不变。  
如下图所示：**  
![在这里插入图片描述][20210527105017880.png]

*  **方法一：**

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

代码如下：

（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;
    },

--------------------

![在这里插入图片描述][20210527111358378.gif_pic_center]

*  **方法二：**

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

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

[20210527105017880.png]: /images/20221014/b7d30e5bf84b47f2ad465f7f1376a87b.png
[20210527111358378.gif_pic_center]: /images/20221014/0eb3b1e9988b4b39a5fbfdaec0b2452c.png
[iview_poptip-]: https://www.iviewui.com/components/poptip