右键显示弹框,但是靠近浏览器边缘的部分会被隐藏,需要实现弹框位置自适应
如果想要最终弹框的宽高不超过屏幕视口,就等于屏幕视口的总宽/高减去弹框打开时的起点坐标,剩下的部分大于等于弹框的宽/高,简单来说,可以套用以下公式:
1.1 屏幕视口宽(clientWidth) - 鼠标点击的x轴(pageX) >= 弹框宽
1.2 屏幕视口高(clientHeight) - 鼠标点击y轴(pageY) >= 弹框高
1.首先获取屏幕视口的宽高
const windowWidth = ref(document.documentElement.clientWidth);
const windowHeight = ref(document.documentElement.clientHeight);
2.获取弹框打开时的起点,也就是当前鼠标点击的位置
宽 :e.pageX
高:e.pageY
3.获取弹框的宽高
在此我给的是固定宽500px高300px,如果是动态宽高请自行获取
4.给弹框设置固定定位,对应的left和top值如下:
left: windowWidth - e.pageX >= 500 ? e.pageX : windowWidth - 500,
top: windowHeight - e.pageY >= 300 ? e.pageY : windowHeight - 300,
1.自定义的弹框组件
{{ state.title }}
保存
取消
2.组件展示
{{
'按钮' + item + ' : 请点击右键'
}}
1.clientX、clientY
点击位置距离当前body可视区域的x,y坐标
2.pageX、pageY
对于整个页面来说,包括了被卷去的body部分的长度
3.screenX、screenY
对于整个屏幕来说(点击位置距离当前电脑屏幕的x,y坐标),包括了被卷去的body部分的长度
4.offsetX、offsetY
对于当前元素来说(相对于带有定位的父盒子的x,y坐标),包括了被卷去的body部分的长度
5.x、y
对于当前元素来说,不包括被卷去的body部分的长度