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