由于弹框遮罩层问题,如果绑定鼠标移入移出事件不能顺利,就想着监听鼠标坐标来实现,vue拥有监听器实现简单,就想着用proxy来做一个
如下代码
<template> <div id="x">x:0</div> <div id="y">y:0</div> <div class="myDiv" index="1">mydiv1</div> <div class="myDiv" index="2">mydiv2</div> <div class="myDiv" index="3">mydiv3</div> <div class="myDiv" index="4">mydiv4</div> <div class="myDiv" index="5">mydiv5</div> <div class="myDiv" index="6">mydiv6</div> <div class="myDiv" index="7">mydiv7</div> <div class="myDiv" index="8">mydiv8</div> <div class="myDiv" index="9">mydiv9</div> <div id="fullscreen-overlay"> <div id="fullscreen-popup"> <p>这是一个全屏弹窗</p> </div> </div> </template> <script> import { onMounted } from 'vue'; export default { name: 'HelloW', setup(){ let position//当前悬浮元素 let x1,x2,y1,y2//当前悬浮元素边界 const handle = { get: function (target, key, receiver) { return Reflect.get(target, key, receiver); }, set: function (target, key, value, receiver) { let obj = {x:0,y:0} if(key=='x'){ obj.x = value document.getElementById('x').innerText=`x:${obj.x}` if(x1<value&&x2>value){ //在元素区域内继续监听 watch() }else{ //出界解除监听 disWatch() } } if(key=='y'){ obj.y = value document.getElementById('y').innerText=`y:${obj.y}` if(y1<value&&y2>value){ watch() }else{ disWatch() } } return Reflect.set(target, key, value, receiver); } } //创建newObjposition对象实现设置属性拦截 const newObjposition = new Proxy({x:0,y:0},handle) //鼠标移动处理事件,弹框显示时开始监听 const updateMousePosition = function(event){ x1 = position.target.getBoundingClientRect().left x2 = position.target.getBoundingClientRect().left+100 y1 = position.target.getBoundingClientRect().top y2 = position.target.getBoundingClientRect().top + 50 newObjposition.x = event.pageX newObjposition.y = event.pageY } //监听 const watch = function(){ window.addEventListener('mousemove',updateMousePosition) } //消除遮罩 const disWatch = function(){ const fullscreenoverlay = document.getElementById('fullscreen-overlay') fullscreenoverlay.style.display = 'none' } onMounted(()=>{ let nodes = document.getElementsByClassName('myDiv') const fullscreenoverlay = document.getElementById('fullscreen-overlay') Array.from(nodes).forEach(ele=>{ ele.addEventListener('mouseover',(e)=>{ fullscreenoverlay.style.display = 'block' position = e console.log(position.target.getAttribute("index")) watch() }) }) }) return { newObjposition } }, } </script> <style scoped> .myDiv{ z-index: 800; border: 1px solid gainsboro; padding: 10px; background: gainsboro; width: 100px; height: 50px; margin: 30px; box-sizing: border-box; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } #fullscreen-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 901; } #fullscreen-popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; text-align: center; width: 500px; height: 200px; } #close-button { position: absolute; top: 10px; right: 10px; } #x{ } #y{ } </style>
标签:const,target,top,50%,proxy,key,position,监听,鼠标 From: https://www.cnblogs.com/lijun12138/p/17341390.html