elementui树状结构添加右键点击事件
<el-tree :highlight-current="highlight" :data="folderList" :props="defaultProps" @node-contextmenu="rightClick" @node-click="handleNodeClick"  ></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() {
// 取消⿏标监听事件菜单栏
box sizing
},
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) {
p = event.clientY - 30 + 'px'
} else {
p = event.clientY - 10 + 'px'
}
},
rightClick(row, column, event){
// if(column.id){
this.pid = column.id;
// 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;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。