Vue实现鼠标经过文字显示悬浮框效果的示例代码_vue鼠标悬浮显示文字,vue鼠标悬停并以悬浮框显示 - CSDN文库

70 浏览量更新于2023-03-16 评论收藏 166KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue实现鼠标经过文字显示悬浮框效果的示例代码实现鼠标经过文字显示悬浮框效果的示例代码

主要介绍了Vue实现鼠标经过文字显示悬浮框效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参

考学习价值，需要的朋友们下面随着小编来一起学习学习吧

需求需求

在所做的Vue项目中，需要在鼠标移动文字框的时候显示一些详细信息。最终实现的效果如下：

鼠标经过button的时候，可以在光标附近显示出一个悬浮框，显示框里面显示时间和值的信息，鼠标移出button元素的时候，这个显示框会消

失。

分析分析

涉及到鼠标的移动事件。

鼠标事件有下面这几种：

1、onclick(鼠标点击事件)

box.onclick = function(e){

console.log(e)

}

2、onmousedown(鼠标按下事件)

box.onmousedown = function(e){

console.log(e)

}

3、onmouseup(鼠标松开事件)

box.onmouseup = function(e){

console.log(e)

}

4、onmousemove(鼠标移动事件)

box.onmousemove = function(e){

console.log(e)

}

5、onmouseout(鼠标划出事件)

box.onmouseout = function(e){

console.log(e)

}

由鼠标的MouseEvent需要了解几个坐标：

一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标

二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标

五、x、y 和screenX、screenY一样

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38512659

粉丝: 9
资源: 974

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈