vue中添加原生右键菜单

<div
  v-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);
}

原文地址：https://blog.csdn.net/u012399690/article/details/149144467

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！