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);
}
相关推荐
paopaokaka_luck5 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
90后的晨仔9 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang9 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔9 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
90后的晨仔9 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js
SY_FC10 小时前
uniapp input 聚焦时键盘弹起滚动到对应的部分
javascript·vue.js·elementui
爱吃香蕉的阿豪10 小时前
SignalR 全解析:核心原理、适用场景与 Vue + .NET Core 实战
vue.js·microsoft·c#·.netcore·signalr
渣渣盟12 小时前
JavaScript核心概念全解析
开发语言·javascript·es6
Carlos_sam12 小时前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript