设置弹窗随鼠标位置移动

你们瞎搞2024-01-16 11:08

1.这是要移动的弹窗，隐藏显示逻辑、样式、展示内容自己写，主要就是动态设置弹窗的style，floatLeft和floatTop都是Vue中的data双向绑定数据；

html 复制代码

<div id="box" v-show="hasMove" :style="{ left: floatLeft + 'px', top: floatTop + 'px' }">
   <p>{{ Math.round(distanceSum) }}米</p>
</div>

2.计算弹窗位置主要就是拿到鼠标位置屏幕坐标系和弹窗左上角位置绑定，但是要注意设置鼠标位置在四周边缘的时候，弹窗不应该被屏蔽遮挡到；

javascript 复制代码

window.addEventListener("mousemove", function (e) {
  // 设置鼠标位置和弹窗左上角的位置
  that.floatLeft = e.pageX + 10;
  that.floatTop = e.pageY - 30;
  // 解决不同浏览器可视区域参数不统一的问题
  let width =
    e.view.innerWidth > e.view.outerWidth
      ? e.view.innerWidth
      : e.view.outerWidth;
  // 设置鼠标位置在屏幕右侧的时候弹窗位置
  if (e.pageX > width - 100) {
    that.floatLeft = width - 100;
  }
  // 设置鼠标位置在屏幕上边的时候弹窗位置
  if (e.pageY < 20) {
    that.floatTop = e.pageY;
  }
  // 设置鼠标位置在屏幕下边的时候弹窗位置
  if (e.pageY > e.view.outerHeight - 10) {
    that.floatTop = e.view.outerHeight - 20;
  }
});