<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;
}
}
