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

定义个定位的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;
  }
  
  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值