学习记录： 最近做了个文档相关的系统，其中用到了鼠标右键点击事件的处理，这里做个学习总结。 实现效果如下图所示： 思路整理：

1.MenuList ：这数组中放的是显示的内容，我这里给了几个name展示效果，若是后台接口传输数据原理一致。 2.contextmenu.prevent ：这是鼠标右击的点击事件，还有一个oncontextmenu 鼠标右击事件，前者是只有火狐浏览器支持，后者是所有浏览器都支持。菜鸟教程解释链接（菜鸟教程右击事件） 3.openMenu ：自定义的方法，控制台输出可以判断出e的作用，根据用于判断鼠标右击的位置；item即是点击v-for中name对应的值。 4.visible ：控制右击后显示的界面是否显示。 5.:style ：全局定义left和top，并传给对应右击位置的参数。 6.watch ：监听属性，当用户点击其他位置时，关闭visible界面。 7.addEventListener ：为元素添加点击事件。（菜鸟教程向指定元素添加事件句柄）

1.HTML代码如下所示：

{{item.name}}

  • 查看

  • 删除

2.JS代码如下图所示：

3.CSS样式如下图所示：

以上就是实现右击事件的全部代码，有需要的随便拿，若有不足的地方还望可以指正，共同进步。

查看原文