具體實現(xiàn)
新建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; // 先把模態(tài)框關死，目的是 第二次或者第n次右鍵鼠標的時候 它默認的是true
this.menuVisible = true; // 顯示模態(tài)窗口博个，跳出自定義菜單欄
key.preventDefault(); //關閉瀏覽器右鍵默認事件,key就相當于event
console.log(data);
var menu = document.querySelector(".menu");
this.styleMenu(key, menu);
}
},
foo() {
// 取消鼠標監(jiān)聽事件 菜單欄
this.menuVisible = false;
document.removeEventListener("click", this.foo); // 關掉監(jiān)聽，
},
styleMenu(key, menu) {
document.addEventListener("click", this.foo); // 給整個document新增監(jiān)聽鼠標事件，點擊任何位置執(zhí)行foo方法
console.log(key.clientX);
menu.style.left = key.clientX - 180 + 10 + "px";
menu.style.top = key.clientY - 50 - 10 + "px";
},
具體效果
右鍵點擊效果
