vue里实现鼠标点击哪里div定位在哪里

最新推荐文章于 2025-06-14 15:53:48 发布

原创最新推荐文章于 2025-06-14 15:53:48 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #鼠标点哪div定位在哪

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Vue.js实现一个动态定位的div元素，通过监听鼠标点击事件调整div的位置。详细解析了如何根据鼠标事件的pageX和pageY属性计算div的左、顶部偏移量，并展示了一个具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义个定位的div,需要绑定style

	<div v-if='showBox'>
		<div class='show-parent' :style="{left: tranLeft, top: tranTop}">
			<div class="shard">
	          <div class="show-inner">
	            <div>申请次数</div>
	            <div>1天内</div>
	            <div>7天内</div>
	          </div>
	        </div>
		</div>
	</div>
	<span class='show' @click='show'></span>

	export default {
		data() {
			return {
				showBox: false，
				tranLeft: 0， // 向左偏移
				tranTop: 0  // 向右偏移
			}
		},
		methods: {
			show(e) {
				// 根据事件处理参数e下的pageX，PageY来定位div的位置
				// 需要计算下div定位的差值 我这边是横轴是500左右纵轴是163左右
				this.tranLeft = (e.pageX - 500) + 'px'
				this.tranTop = (e.pageY - 163) + 'px'
				// 点击的时候显示模态框
				this.showBox = true	
			}	
		}
	}

	.show-parent {
    position: absolute;
    /*top: 587px;
    left: 933px;*/
    width: 300px;
    background-color: #ffffff;
    box-shadow: 0 0 2px #8c939d;
    z-index: 1;
  }