vue中添加原生右键菜单

叹一曲当时只道是寻常2025-07-06 13:41

vue 复制代码

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

数据结构定义

javascript 复制代码

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);    
);

在需要触发的组件中调用

vue 复制代码

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

样式定义

css 复制代码

/* 新增右键菜单样式 */
.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);
}