本文实例为大家分享了Vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下 效果: html: <div @mouseenter="enter" @mouse
本文实例为大家分享了Vue实现鼠标悬浮框效果的具体代码,供大家参考,具体内容如下
效果:
html:
<div
@mouseenter="enter"
@mouseleave="leave"
@mousemove="move"
>
鼠标触碰元素
</div>
<div v-show="popUpShow" class="hover_con" :style="positionStyle">
悬浮框
</div>
js:
export default {
name: '',
data() {
return {
popUpShow:false,
positionStyle:{top:'0px',left:'0px'}
}
},
methods: {
enter() {
this.popUpShow = true
},
leave() {
this.popUpShow = false
},
move(event) {
const x = event.pageX + 15 + 'px'
const y = event.pageY + 10 + 'px'
this.positionStyle = { top: y, left: x }
}
}
}
CSS:
.hover_con{
position: fixed;
max-width: 220px;
padding: 10px;
border: 1px solid #666;
background: #ccc;
}
关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别
offsetX、offsetY: 鼠标相对于事件源元素(srcElement)的X,Y坐标
clientX、clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。
pageX、pagey: 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没 有这2个属性
screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X,Y坐标。
--结束END--
本文标题: vue实现鼠标悬浮框效果
本文链接: https://www.lsjlt.com/news/144569.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0