定义个定位的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;
}