具体实现
新建div(data中别忘menuVisible,用来控制菜单是否显示)
<div id="contextmenu" v-show="menuVisible" class="menu">
<div class="contextmenu_item" @click="cha(currentData)">查哨</div>
<div class="contextmenu_item" @click="shang(currentData)">上哨</div>
</div>
设计样式
.menu {
position: absolute;
background-color: #fff;
width: 100px;
/*height: 106px;*/
font-size: 12px;
color: #444040;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
white-space: nowrap;
z-index: 1000;
}
.contextmenu_item {
display: block;
line-height: 34px;
text-align: center;
}
.contextmenu_item:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.contextmenu_item:hover {
cursor: pointer;
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
给树形控件绑定右键点击事件
@node-contextmenu="rightClick"
完善右键点击方法
rightClick(key, data) {
if (data.children && data.children != null) {
this.menuVisible = false;
} else {
this.currentData = data;
this.menuVisible = false; // 先把模态框关死,目的是 第二次或者第n次右键鼠标的时候 它默认的是true
this.menuVisible = true; // 显示模态窗口,跳出自定义菜单栏
key.preventDefault(); //关闭浏览器右键默认事件,key就相当于event
console.log(data);
var menu = document.querySelector(".menu");
this.styleMenu(key, menu);
}
},
foo() {
// 取消鼠标监听事件 菜单栏
this.menuVisible = false;
document.removeEventListener("click", this.foo); // 关掉监听,
},
styleMenu(key, menu) {
document.addEventListener("click", this.foo); // 给整个document新增监听鼠标事件,点击任何位置执行foo方法
console.log(key.clientX);
menu.style.left = key.clientX - 180 + 10 + "px";
menu.style.top = key.clientY - 50 - 10 + "px";
},