前端自定义右键菜单（其余内容也可以）

概述：

整个过程主要分3个部分

1. 设置想显示的内容（场景为菜单）
2. 拦截右键默认的菜单
3. 在预期位置显示

1.设置想显示的内容

在页面上定义想显示的内容

	<div id="rightMenu" class="rightMenu">
		<div class="item" @click="handleAddPoi">
			<span style="margin-left: 4px"> 热点</span>
		</div>
	</div>

定义CSS

.rightMenu {
	position: absolute;
    display:none;
	width: 120px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	z-index: 999;
}

重点有两点

1. 设置position:absolute 目的是为了内容可以自定义位置
2. display：none先不显示，vue可以用v-show之类的也可以

2.拦截右键菜单

	document.addEventListener('contextmenu', function (e) {
		showRightMenu(e); // 去显示自己定义的内容
		e.preventDefault(); // 阻止浏览器的默认右键菜单
	});

下狠手是直接拦截document，简单快捷，也可以按需，只拦截部分div，只需要获取到元素在拦截就可以

 const page = document.getElementById('page') as HTMLElement;

3.显示自己的内容

const showRightMenu = (e: any) => {
	console.log('showRightMenu', e);
	// if (rightMenuVisible.value) {
		// rightMenuVisible.value = false;
		// return;
	// }  
    // vue的代码，用于关闭，如果打开就关闭
    const menu = document.getElementById('rightMenu') as HTMLElement;
	menu.style.left = e.clientX + 'px';
	menu.style.top = e.clientY + 'px';
    menu.style.display="block" // 原生代码，显示
	// rightMenuVisible.value = true; // Vue代码显示 

};	

备注

有需要比如点下关闭，在点下打开，只要在显示里面加上判断当前状态的代码，如上图，先判断进行状态控制