elementui树状结构添加右键点击事件

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

}

巴特西

elementui树状结构添加右键点击事件

最新文章

热门文章