<el-tree :highlight-current="highlight" :data="folderList" :props="defaultProps" @node-contextmenu="rightClick" @node-click="handleNodeClick" style="min-width: 100%;display: inline-block;"></el-tree>
<div id="contextmenu"
v-show="menuVisible"
class="menu">
<div class="contextmenu__item" @click="addDialogFolder"
>添加</div>
<div class="contextmenu__item"
>刪除</div>
<div class="contextmenu__item"
>更名文件</div>
</div>
methods: {
foo() {
// 取消鼠標監聽事件 菜單欄
this.menuVisible = false
document.removeEventListener('click', this.foo) // 關掉監聽，
},
styleMenu(menu) {
if (event.clientX > 1800) {
menu.style.left = event.clientX - 100 + 'px'
} else {
menu.style.left = event.clientX + 1 + 'px'
}
document.addEventListener('click', this.foo) // 給整個document新增監聽鼠標事件，點擊任何位置執行foo方法
if (event.clientY > 700) {
menu.style.top = event.clientY - 30 + 'px'
} else {
menu.style.top = event.clientY - 10 + 'px'
}
},
rightClick(row, column, event){
// if(column.id){
this.pid = column.id;
this.testModeCode = row.testModeCode
this.menuVisible = false // 先把模態框關死，目的是 第二次或者第n次右鍵鼠標的時候 它默認的是true
this.menuVisible = true // 顯示模態窗口，跳出自定義菜單欄
// event.preventDefault() //關閉瀏覽器右鍵默認事件
this.CurrentRow = row
var menu = document.querySelector('.menu')
this.styleMenu(menu)
// }else{
// }
},
}
style{
.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);
}
.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:hover {
cursor: pointer;
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
}
