实现的核心在于两点：
- tabindex 属性：使菜单元素能够接收焦点
- blur 事件：当菜单失去焦点时自动关闭
优势在于：
- 代码简洁，逻辑清晰
- 页面中存在多个右键菜单时不需要来回进行开关操作
- 无需复杂的 DOM 事件监听
- 符合用户直觉（点击其他地方菜单消失）
代码实例：
右键点击此处显示菜单
复制
粘贴
删除
import { ref, nextTick } from 'vue';
const showMenu = ref(false);
const position = ref({ x: 0, y: 0 });
const menuRef = ref(null);
const openContextMenu = (e) => {
showMenu.value = true;
position.value = { x: e.clientX, y: e.clientY };
nextTick(() => {
menuRef.value?.focus();
});
};
const handleAction = (action) => {
console.log('执行操作:', action);
};
.context-menu {
position: fixed;
background: white;
border: 1px solid #ddd;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
min-width: 120px;
outline: none;
/* 移除焦点时的轮廓 */
}
.menu-item {
padding: 8px 12px;
cursor: pointer;
}
.menu-item:hover {
background: #f5f5f5;
}