<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-b
ottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu {
position: absolute;
background-color: #fff;
width: 100px;
/*height: 106px;*/
font-size: 12px;
color: #44
4040;
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;
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
