vue右键菜单学习

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

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

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

        showMenu:function (parameter) {parameter.preventDefault()var x = parameter.clientXvar y = parameter.clientYthis.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地址。