一 前言
之前只实现了对el-tree树形控件初步显示右键菜单,今天对其进一步完善,主要实现如下功能:
1.对菜单进行美化,统一成element-ui风格。
2.右键菜单出现后,点击菜单外其余地方可实现对菜单项的隐藏。
3.右键菜单里放置添加节点和删除节点功能,并加以实现。
二 具体实现
1.查看element-ui的主调色,及其他类似菜单的实现方式,将风格统一。
2.点击空白处使菜单隐藏
这就需要监听鼠标的点击事件,当所点区域是菜单之外即可实现隐藏。
最初实现方法是: document.addEventListener(‘click’,this.menuHide,false);
此方法的三个参数含义为:
1:必须,字符串,指定事件名;
2:必须,指定要事件触发时执行的函数;
3:可选,布尔值,指定事件执行的阶段,在冒泡或者捕获阶段执行。(true为捕获,false为冒泡)
menuHide(e){
console.log("我被执行了!!!");
console.log("!!!!!!!!!!!!!!e.targetName=