经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue实现组件跟随鼠标位置弹出效果(示例代码)
来源:jb51  时间:2022/2/14 13:36:15  对本文有异议

在这里插入图片描述

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

在这里插入图片描述

  1. toCenter(event){
  2. const{x,y}=event
  3. this.mouse_x=x;
  4. this.mouse_y=y;
  5. this.showCenter=true;
  6. },

在这里插入图片描述

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

在这里插入图片描述

注意!!!

在这里插入图片描述

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

在这里插入图片描述

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

  1. data(){
  2. return {
  3. content:['上传头像','修改资料','退出账号','在线反馈'],
  4. sty:{
  5. top:'',
  6. left:''
  7. }
  8. }
  9. },
  10. watch:{
  11. x:function(val){
  12. this.sty.left=(val+10)+'px'
  13. },
  14. y:function(val){
  15. this.sty.top=(val+30)+'px'
  16. }
  17. }
  18. }

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

在这里插入图片描述

  1. leaveCenter(){
  2. this.showCenter=false;
  3. }

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号