vue+elementui实现鼠标触及当前页面右边缘，右侧弹出新的对话框

原创已于 2024-07-25 09:25:42 修改 · 2.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui

于 2023-08-15 15:06:36 首次发布

vue 专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用ElementUI的el-drawer组件创建一个响应鼠标边缘的动态对话框。通过监控mousemove事件并计算鼠标位置与页面大小的关系，实现对话框在用户接近页面右侧时弹出，点击回缩按钮后隐藏。

vue+elementui实现鼠标触及当前页面右边缘，右侧弹出新的对话框

使用场景

目前项目中需要自定义大屏，但是大屏右侧显示矩形对话框有一点突兀，所以做成鼠标靠近页面右侧边缘的时候对话框弹出，点击对话框上的回缩按钮后，对话框隐藏。

项目解决方案

对话框使用elemetui自带的el-drawer，设置其是否展示参数初始化为false

<el-drawer :visible.sync="drawer"></el-drawer>

在最外层的div标签添加@mousemove获取鼠标动作

 <div id="container"  @mousemove="handleMouseMove" >
 	<el-drawer :visible.sync="drawer"></el-drawer>
 </div>

该方法会返回多个位置数据

在这里插入图片描述

因为我们的目标位置是当前网页边缘，所以选用pageX、pageY两个参数

pageX、pageY 是相对于页面左上角的距离
clientX、clientY是相对于浏览器左上角的距离

计算鼠标位置与页面大小的差，设定差值范围，在该范围内即弹出。

handleMouseMove(e){
      let winWidth=window.innerWidth;
      let winHeight=window.innerHeight;
      let pageX=e.pageX,pageY=e.pageY;
      //设定范围为 0.85<x<1 0.2<y<0.6
      if(pageX/winWidth>0.85&& (pageY/winHeight>0.2&&pageY/winHeight<0.6)){
      //显示右侧对话框
        this.drawer=true;
      }
    },