脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue组件跟随鼠标位置弹出

vue实现组件跟随鼠标位置弹出效果(示例代码)

 更新时间：2022年02月14日 11:30:26   作者：tutou_girl  
这篇文章主要介绍了vue中实现组件跟随鼠标位置弹出效果,本文通过图文示例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

在这里插入图片描述

实现鼠标放置在“我的”上时出现卡片，卡片位置跟随鼠标。当鼠标移除卡片时卡片隐藏。
当鼠标移入时获取鼠标坐标，并把父组件的鼠标位置通过prop传给子组件。

在这里插入图片描述

toCenter(event){
  const{x,y}=event
  this.mouse_x=x;
  this.mouse_y=y;
  this.showCenter=true;
},

在这里插入图片描述

子组件通过动态绑定style改变div坐标。

在这里插入图片描述

注意！！！

在这里插入图片描述

一开始没用watch，而是在data里直接修改，如上所示。
这样会出现刷新以后data获取不到prop中的属性值。如下图

在这里插入图片描述

加上watch监听prop中x，y变化，这样可以解决。最终版本如下：

 data(){
   return {
     content:['上传头像','修改资料','退出账号','在线反馈'],
     sty:{
       top:'',
       left:''
     }
   }
  },
 watch:{
   x:function(val){
     this.sty.left=(val+10)+'px'
   },
   y:function(val){
     this.sty.top=(val+30)+'px'
   }
 }
}

对了，在组件上添加鼠标移出事件就可以实现鼠标移出卡片关闭。

在这里插入图片描述

leaveCenter(){
  this.showCenter=false;
}

到此这篇关于vue中实现组件跟随鼠标位置弹出效果的文章就介绍到这了,更多相关vue组件跟随鼠标位置弹出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3编写气泡对话框组件

    Vue3编写气泡对话框组件

    这篇文章主要为大家详细介绍了Vue3编写气泡对话框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    Ant Design Vue 走马灯实现单页多张图片轮播效果

    这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-07-07
  • vue3无法使用jsx的问题及解决

    vue3无法使用jsx的问题及解决

    这篇文章主要介绍了vue3无法使用jsx的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue实现todolist基本功能以及数据存储功能实例详解

    vue实现todolist基本功能以及数据存储功能实例详解

    本文通过实例代码给大家介绍了vue实现todolist基本功能以及数据存储功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • vue的状态更新方式(异步更新解决)

    vue的状态更新方式(异步更新解决)

    这篇文章主要介绍了vue的状态更新方式(异步更新解决)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue获取input值的三种常用写法

    vue获取input值的三种常用写法

    这篇文章主要介绍了vue获取input值的三种常用写法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue项目启动提示Cannot GET /问题

    Vue项目启动提示Cannot GET /问题

    这篇文章主要介绍了Vue项目启动提示Cannot GET /问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue的data、computed、watch源码浅谈

    Vue的data、computed、watch源码浅谈

    这篇文章主要介绍了Vue的data、computed、watch源码浅谈，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • VUE如何实现前端组件式开发和动态装载详解

    VUE如何实现前端组件式开发和动态装载详解

    Vue动态加载是指在Vue框架中,根据需要动态加载组件、模板或静态资源的能力,这篇文章主要介绍了VUE如何实现前端组件式开发和动态装载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-10-10
  • 在Vue3中使用event bus(事件总线)的步骤详解

    在Vue3中使用event bus(事件总线)的步骤详解

    在Vue 3中,可以通过创建一个事件总线（event bus）来实现组件之间的通信,要在Vue 3中使用事件总线,主要步骤有：1、创建一个新的Vue实例作为事件总线,2、在组件中引入并使用该事件总线,以下是详细的步骤和示例,需要的朋友可以参考下
    2025-01-01

最新评论