vue2.0 @contextmenu 右键点击事件

最新推荐文章于 2026-05-04 09:44:36 发布

原创最新推荐文章于 2026-05-04 09:44:36 发布 · 1.5k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

技术同时被 2 个专栏收录

19 篇文章

订阅专栏

@contextmenu

1 篇文章

订阅专栏

本文介绍了一种在网页中通过监听右键点击事件并获取点击位置坐标的方式，来实现自定义右键菜单的显示位置。具体包括使用Vue.js进行事件绑定及样式调整的技术细节。

<div @contextmenu.prevent="openMenu($event)"> 右键点我 </div>

<!-- 右键弹出菜单设置 -->
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
  <li >刷新</li>
  <li >关闭</li> 
  <li >关闭其他</li>
  <li >关闭所有</li>
</ul>

右键点击时触发事件，获取到点击位置的x,y坐标，根据这个坐标去设置弹出框位置