右键菜单涉及到几个部分：

【一是，捕获鼠标右键。】

在vue中可以在使用contextmenu事件，将需要捕获的区域使用标签<div@contextmenu="showMenu"></div>包裹住，通过contextmenu调用自定义的函数showMenu(parameter)，其中参数parameter是一个MouseEvent对象，等同于window.event。

        showMenu:function (parameter) {
			parameter.preventDefault()
			var x = parameter.clientX
			var y = parameter.clientY
			this.entityTreeContextMenu.axios = {
			  x, y
			}
        }

【二是，定义右键菜单】

可引入组件vue-contextmenu（cnpminstall vue-contextmenu --save）。

                    <div @contextmenu="showMenu">
                        <VueContextMenu :contextMenuData="menuData" @refresh="refreshxxx" @add="addxxx" @del="delxxx">
                        </VueContextMenu>
                        <xxx></xxx>
                    </div>

html代码中引入vue-contextmenu组件，通过contextMenuData属性定义菜单，绑定在menuData数据上：

menuData:{
	menuName:'name1',
	axios:{x:null, y:null},
	menulists:[
		{fnHandler:'refresh',icoName:'el-icon-setting',btnName:'刷新'},
		{fnHandler:'add',icoName:'el-icon-more',btnName:'添加'},
		{fnHandler:'del',icoName:'el-icon-delete',btnName:'删除'},
	],
}

menuName：定义菜单名称，全局唯一。
axios：菜单显示的位置。
menulists：定义菜单项，每一项：fnHandler定义函数名，icoName定义图标，btnName定义菜单项内容。
fnHandler定义的函数名需要在html代码中通过设置属性进行绑定。如refresh将调用refreshxxx函数。


分析：这个组件是通过编译为<span>标签，通过menuName设置<span>的class属性，根据class查找对应的<span>标签，通过设置style.display属性为none或block来控制显示与否。


参考： github地址。