vue中添加原生右键菜单

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);
}
相关推荐
OEC小胖胖2 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴3 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust4 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放4 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝5 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele5 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮5 小时前
【无标题】
开发语言·前端·javascript