vue实现鼠标悬浮框效果
更新时间：2022年03月31日 10:45:11 作者：天高任鸟飞dyz（前端）
这篇文章主要为大家详细介绍了vue实现鼠标悬浮框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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坐标。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期2022-09-09
vue使用localStorage保存登录信息 适用于移动端、PC端
这篇文章主要为大家详细介绍了vue使用localStorage保存登录信息 适用于移动端、PC端，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了Vue项目启动后如何在浏览器自动打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
响应式 API 赋予了组合式 API 一大坨可能性的同时,代码精简,虽然但是,我们应该意识到响应性的某些陷阱,比如丢失响应性,在本文中,我们将学习如何正确解构 Vue 组件的 props,使得 props 不会丢失响应性2024-01-01
Vue中计算属性和监听属性及数据的响应式更新和依赖收集基本原理讲解
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2023-03-03
Vue 子组件使用 this.$parent 无法访问到父组件数据和方法(解决思路)
这篇文章主要介绍了Vue 子组件使用 this.$parent 无法访问到父组件数据和方法，解决思路也很简单，本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了Vue实现数值型输入框并限制长度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
下面小编就为大家分享一篇mint-ui 时间插件使用及获取选择值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了vue中el-tree增加节点后如何重新刷新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最近运行vue项目的时候报错了,通过查找相关资料最终解决,下面这篇文章主要给大家介绍了关于vue运行报错cache-loader的解决步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
最新评论