Vue 3 组合式函数怎么实现右键自定义菜单的交互逻辑

风婷小哥_5436

风婷小哥_5436

2026-10-18

747人浏览

原创

usecontextmenu 封装右键菜单逻辑,提供 showmenu/hidemenu/selectitem 等 api,支持动态菜单、上下文透传、边界检测与定位优化,解耦 ui 与行为。

vue 3 组合式函数怎么实现右键自定义菜单的交互逻辑

用组合式函数封装右键菜单交互逻辑,核心是把「事件监听、位置计算、菜单显隐、点击收起」这些共性能力抽离成可复用的 useContextMenu 函数。它不耦合 UI,只管状态和行为,配合模板灵活渲染。

定义基础响应式状态与事件绑定

在组合函数内声明菜单是否显示、坐标位置、当前菜单数据等响应式变量,并绑定全局右键拦截和点击收起逻辑:

  • 用 ref 管理 show(布尔值)、x 和 y(像素坐标)、menuItems(菜单项数组)
  • 在 onMounted 中监听 contextmenu 事件,用 $event.clientX / clientY 计算位置并阻止默认行为
  • 同时监听 document:click 或 mousedown,点击非菜单区域时设 show = false
  • 调用 onUnmounted 清理事件监听器,避免内存泄漏

支持动态菜单与上下文透传

右键菜单往往需要根据点击目标不同展示不同选项,所以组合函数要能接收“触发源”信息:

vue-composition-api-best-practices
vue-composition-api-best-practices

Vue 3 组合式 API 与

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 17.1万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

Vue.js 微实战--十天技能课堂
Vue.js 微实战--十天技能课堂

共18课时 | 1.7万人学习