React中右击出现自定弹窗
前言
在react中点击右键,完成阻止浏览器的默认行为,完成自定义的悬浮框(Menu菜单).
版本
"react": "^18.2.0",
"@umijs/route-utils": "^4.0.1",
"antd": "^5.18.1",
"@ant-design/pro-components": "^2.4.4",
效果
代码
第一种方式(display属性block/none)
1. 页面代码
// 鼠标右击事件,显示右击的相关菜单数据const [contextMessage, setContextMessage] = useState(null);const hideContextMenu = () => {const menu: any = document.getElementById('context-menu');if (menu) {menu.style.display = 'none';}};const handleRowContextMenu = (record) => (e: React.MouseEvent) => {e.preventDefault(); //阻止默认行为const menu: any = document.getElementById('context-menu'); //获取元素menu.style.display = 'block'; //显示下面的divmenu.style.left = (e.pageX - 250) + 'px'; // 可以减去一些像素，比如10menu.style.top = (e.pageY - 180) + 'px'; // 减去10像素setContextMessage(record); //这个是设置点击的这一项的所有值document.addEventListener('click', hideContextMenu); //监听};const handleMenuItemClick = (option: string) => {alert(option); // 处理菜单项点击hideContextMenu(); // 点击后隐藏菜单//后续操作.........};<ProTablerowKey='workId'key='workList'onRow={(record, rowIndex) => {return { onContextMenu: handleRowContextMenu(record), // 添加右键事件 }}}/>
<div id="context-menu"><ul><li onClick={() => handleMenuItemClick('新增同级')}>新增同级</li><li onClick={() => handleMenuItemClick('新增子集')}>新增子集</li></ul>
</div>2.css代码
#context-menu {display: none;position: absolute;border: 1px solid #ccc;background-color: white;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);z-index: 1000;
}
#context-menu ul {list-style-type: none;margin: 0;padding: 0;
}
#context-menu ul li {padding: 8px 12px;cursor: pointer;
}
#context-menu ul li:hover {background-color: #f0f0f0;
}