右键菜单涉及到几个部分:
【一是,捕获鼠标右键。】
在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地址。