1.这是要移动的弹窗，隐藏显示逻辑、样式、展示内容自己写，主要就是动态设置弹窗的style，floatLeft和floatTop都是Vue中的data双向绑定数据；文章来源：https://www.toymoban.com/news/detail-787599.html
<div id="box" v-show="hasMove" :style="{ left: floatLeft + 'px', top: floatTop + 'px' }">
<p>{{ Math.round(distanceSum) }}米</p>
</div>2.计算弹窗位置主要就是拿到鼠标位置屏幕坐标系和弹窗左上角位置绑定，但是要注意设置鼠标位置在四周边缘的时候， 弹窗不应该被屏蔽遮挡到；文章来源地址https://www.toymoban.com/news/detail-787599.html
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;
}
});到了这里，关于设置弹窗随鼠标位置移动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
