vue el-tree 添加鼠标右键菜单

最近实现了一个功能：点击 el-tree 某一行，鼠标右键出现菜单，点击相应的菜单可进行对应的操作。

基础布局代码：

      <div class="dev-type-main-left">
        <!--鼠标右键菜单栏 -->
        <div v-show="showRightMenu">
          <ul id="menu"
              class="right-menu">
            <li class="menu-item"
                @click="addDevHandle">
              {{$t('common.add')}}
            </li>
            <li class="menu-item"
                @click="editDevHandle">
              {{$t('common.edit')}}
            </li>
            <li class="menu-item"
                @click="delDevHandle">
              {{$t('common.delete')}}
            </li>
          </ul>
        </div>
        <el-tree :data="treeData"
                 :props="defaultProps"
                 accordion
                 highlight-current
                 node-key="id"
                 ref="vueTree"
                 @node-contextmenu="rightClick"
                 @node-click="nodeClick">
        </el-tree>
      </div>

相关事件如下：

export default {
  name: 'DeviceType',
  data() {
    name: ''
    return {
      showRightMenu: false
    }
  },
  methods: {
    nodeClick(data) {
      console.log('Node Click', data.id, data, data.name)
    },
    rightClick(event, data, node, obj) {
      this.showRightMenu = false // 先把模态框关死，目的是：第二次或者第n次右键鼠标的时候 它默认的是true
      this.showRightMenu = true
      let menu = document.querySelector('#menu')
      menu.style.left = event.clientX - 220 + 'px'
      menu.style.top = event.clientY - 5 + 'px'
      // 给整个document添加监听鼠标事件，点击任何位置执行closeRightMenu方法，及时将菜单关闭
      document.addEventListener('click', this.closeRightMenu)
      console.log('event', event, event.clientX, event.clientY)
      console.log('data', data)
      console.log(node)
    },
    closeRightMenu() {
      this.showRightMenu = false
      // 及时关掉鼠标监听事件
      document.removeEventListener('click', this.closeRightMenu)
    },
    addDevHandle() {
    },
    editDevHandle() {
    },
    // 删除操作
    delDevHandle() {
    }
  }
}

右键菜单样式：

.dev-type-main-left {
    overflow: auto;
    padding: 10px;
    .right-menu {
      z-index: 1;
      position: absolute;
      height: 100px;
      width: 100px;
      position: absolute;
      border-radius: 5px;
      border: 1px solid #ccc;
      background-color: white;
      .menu-item {
        //display: block;
        line-height: 20px;
        text-align: left;
        margin-top: 10px;
        font-size: 14px;
        color: #606266;
      }
      li:hover {
        background-color: #edf6ff;
        color: #606266;
      }
    }
  }

页面效果如下图，鼠标点击树形结构某一行，鼠标右键，会出现如下菜单：

鼠标hover效果：