vue中添加原生右键菜单

<divv-show="state.contextMenu.visible"class="context-menu":style="{left: `${state.contextMenu.x}px`,top: `${state.contextMenu.y}px`}"
>

数据结构定义

const state = reactive({contextMenu: {visible: false,x: 0,y: 0,currentItem: null}
});// 新增右键菜单处理函数
const handleContextMenu = (event, item) => {event.preventDefault();state.contextMenu = {visible: true,x: event.clientX,y: event.clientY,currentItem: item};
};const closeContextMenu = () => {state.contextMenu.visible = false;
};onMounted(async () => {document.addEventListener('click', closeContextMenu);    
);

在需要触发的组件中调用

 @contextmenu="handleContextMenu($event, item)"

样式定义

/* 新增右键菜单样式 */
.context-menu {position: fixed;background: white;border: 1px solid #ebeef5;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);z-index: 9999;min-width: 120px;
}.menu-item {padding: 8px 16px;cursor: pointer;display: flex;align-items: center;gap: 8px;
}.menu-item:hover {background-color: #f5f7fa;color: var(--el-color-primary);
}