vue自定义右键样式的实例代码-创新互联

最近用python写了个小说程序的api，想着用 vue 做个系统管理数据，脑子里出现的是这个画面：

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了精河免费建站欢迎大家使用！

但是这种样式的管理后台已经做了太多了，已经审美疲劳，后面又想了一种类操作系统的UI界面:

主要是靠 双击 和 右键 来操作，可操作多个模态框，跟操作 windows 类似，接下来在里面拆出一个功能块来写一篇文章，就是 自定义系统默认的右键 。

自定义右键操作有五个步骤： 阻止 默认右键。 获取当前右键点击时的 x / y 坐标，及 id 。 自定义右键菜单样式及内容，定位在指定的位置后显示。 返回对应点击目录的事件如: 查看 、 删除 、 编辑 。 在任何地方点击左键时 隐藏右键菜单 。 关键方法：

@contextmenu.prevent

这个是vue内置的，点击右键（阻止默认右键的默认行为）的一个回调方法，他返回了一大串东西这里我用到的是这两个(用于定位显示菜单的x,y位置)

x_index ， y_index 是储存在 data 中的，用于定位模态框位置。

ctrlId 用于给接口处理的依据

showMenu 用于判断是否显示右键菜单

  

	  
	  
{{item.name}}
	

当前名称：vue自定义右键样式的实例代码-创新互联
分享URL：http://bzwzjz.com/article/depcsh.html