在vue中实现根据鼠标点击位置展示对应的内容
原理:获取鼠标点击的位置,动态地给div框赋宽高值1.给元素绑定动态样式style<div class="dialog_wrapper" v-bind:style="styleObject"></div>
·
原理:获取鼠标点击的位置,动态地给div框赋top和left值
1.给元素绑定动态样式style
<div class="dialog_wrapper" v-bind:style="styleObject"></div>
2.在data中绑定div的style
data() {
return {
styleObject: {
top: '0',
left: '0'
},
};
},
3.获取鼠标点击的位置,并赋值给div
getPosition (event) {
let x = event.pageX
let y = event.pageY
this.styleObject.left = (x) + 'px'
this.styleObject.top = (y) + 'px'
},
更多推荐
已为社区贡献3条内容
所有评论(0)