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