最近用python写了个小说程序的api，想着用
vue 做个系统管理数据，脑子里出现的是这个画面：
但是这种样式的管理后台已经做了太多了，已经审美疲劳，后面又想了一种类操作系统的UI界面:
主要是靠
双击 和
右键 来操作，可操作多个模态框，跟操作
windows 类似，接下来在里面拆出一个功能块来写一篇文章，就是
自定义系统默认的右键 。自定义右键操作有五个步骤：
阻止 默认右键。 获取当前右键点击时的
x /
y 坐标，及
id 。 自定义右键菜单样式及内容，定位在指定的位置后显示。 返回对应点击目录的事件如:
查看 、
删除 、
编辑 。 在任何地方点击左键时
隐藏右键菜单 。 关键方法：
@contextmenu.prevent这个是vue内置的，点击右键（阻止默认右键的默认行为）的一个回调方法，他返回了一大串东西这里我用到的是这两个(用于定位显示菜单的x,y位置)
x_index ，
y_index 是储存在
data 中的，用于定位模态框位置。
ctrlId 用于给接口处理的依据
showMenu 用于判断是否显示右键菜单
<!--template-->
<ul>
<li class="role_list"
v-for="(item,index) in role"
:key="index"
@contextmenu.prevent="(e)=>{
x_index = e.layerX;
y_index = e.layerY;
ctrlId = item.id;
showMenu = true;
}">
<img :src="item.head_portrait" alt="">
<p>{{item.name}}</p>
</li>
</ul>需要的参数(x,y,id)都具备了，因为右键操作很多地方都用到了，所以封装成了一个组件
