vue组件中实现鼠标右键弹出自定义菜单栏

目录

一、背景

二、步骤分析

2.1、监听鼠标右键事件

2.2、自定义弹出框

三、实现效果

---

一、背景

        最近在写一个聊天程序，要实现点击鼠标右键弹出相关的操作菜单栏，以实现相关功能的拓展。这里主要是记录下，如何在vue项目中实现这种功能。

二、步骤分析

2.1、监听鼠标右键事件

        首先，我们需要阻止原默认的鼠标右键事件，弹出我们自定义的相关菜单。这里想到可以使用JavaScript的dom监听器来实现此功能。

// 监听快捷键事件，回调参数事件event
onMounted(() => {document.addEventListener('contextmenu', clickRightMouse)}
)onUnmounted(() => {document.removeEventListener('contextmenu', clickRightMouse)}
)// 鼠标右键监听
function clickRightMouse(event){// 阻止默认事件触发event.preventDefault();// 编写触发自定义逻辑
}

        后面从网上查询了相关资料，发现vue有简写的语法糖，等效使用JavaScript监听器实现的功能实现。

<!-- @contextmenu vue语法糖等效JavaScript对应的监听器 -->
<!-- .prevent vue事件修饰符，自动阻止默认事件运行 -->
<!-- handleRightClick 自定义事件运行逻辑 -->
<div @contextmenu.prevent="handleRightClick"></div>

2.2、自定义弹出框

        点击鼠标右键，在光标所在位置的右侧弹出操作菜单，点击操作按钮，实现对应的操作逻辑。这里重要的是要在弹出框出现前，计算出弹出层的宽高位置。弹出框可以使用position: fiexd; 配合事件回调取出光标位置。

<template><div class="contactGroupList" @contextmenu.prevent="openMenu"><!-- 动态菜单 --><teleport to=".contactGroupList" :defer="true"><divv-show="isShowMenu"class="context-menu":style="{ top: `${mousePosition.y}px`, left: `${mousePosition.x}px` }"><ul><li @click="handleAction('addGroup')"><el-icon><Plus /></el-icon>添加分组</li><li @click="handleAction('deleteGroup')"><el-icon><DeleteFilled /></el-icon>删除分组</li><li @click="handleAction('manageGroup')"><el-icon><EditPen /></el-icon>重命名分组</li></ul></div></teleport><div>
</template><script setup>
import { ref, reactive, markRaw, onBeforeMount, watch } from 'vue'// 右键打开自定义菜单
const isShowMenu = ref(false)
const mousePosition = ref({ x: 0, y: 0 })const openMenu = (e) => {mousePosition.value = {x: e.clientX,y: e.clientY,}isShowMenu.value = truedocument.addEventListener('click', closeMenu)
}const closeMenu = () => {isShowMenu.value = falsedocument.removeEventListener('click', closeMenu)
}const handleAction = (action) => {alert(`执行操作:${action}`)closeMenu()
}
</script><style lang='scss' scoped>
.contactGroupList {width: 100%;height: 100%:display: flex;flex-direction: column;// 联系人鼠标右键弹出菜单样式（弹出框挂载在contactList下的）.context-menu {position: fixed;background: white;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);border-radius: 4px;z-index: 1000;font-size: 14px;}.context-menu ul {list-style: none;padding: 0;margin: 0;min-width: 120px;}.context-menu li {padding: 8px 12px;cursor: pointer;line-height: 100%;display: flex;flex-direction: row;gap: 5px;}.context-menu li:hover {background: #f5f5f5;}
}
</style>

三、实现效果