如何自定义右键弹框并实现位置自适应？

一、问题

右键显示弹框，但是靠近浏览器边缘的部分会被隐藏，需要实现弹框位置自适应

二、 问题分析

如果想要最终弹框的宽高不超过屏幕视口，就等于屏幕视口的总宽/高减去弹框打开时的起点坐标，剩下的部分大于等于弹框的宽/高，简单来说，可以套用以下公式：

1.1 屏幕视口宽（clientWidth） - 鼠标点击的x轴（pageX） >= 弹框宽

1.2 屏幕视口高（clientHeight） - 鼠标点击y轴（pageY） >= 弹框高

三、实现步骤（vue3+ts)

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.自定义的弹框组件

 2.组件展示

五、补充

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部分的长度