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

这篇具有很好参考价值的文章主要介绍了vue+elementui实现鼠标触及当前页面右边缘，右侧弹出新的对话框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

使用场景

目前项目中需要自定义大屏，但是大屏右侧显示矩形对话框有一点突兀，所以做成鼠标靠近页面右侧边缘的时候对话框弹出，点击对话框上的回缩按钮后，对话框隐藏。
效果如图所示
vue el-drawer 在页面内弹出,vue,vue.js,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>

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

vue el-drawer 在页面内弹出,vue,vue.js,elementui

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

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

计算鼠标位置与页面大小的差，设定差值范围，在该范围内即弹出。文章来源地址https://www.toymoban.com/news/detail-784051.html

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;
      }
    },