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;

}

}