Element 组件之 右键鼠标 自定义菜单

Element tree组件之 自定义菜单

看了网上的 基于element tree组件的只有一个人写了，而且代码说实话我看不太懂，于是干脆自己搞，自己搞出来一个，先看一下结果图：

1. 基于element组件 tree组件
2. 右键任何位置 基于鼠标位置跳转菜单
3. 类比于window鼠标右键一样的效果
4. 为什么基于elemet的右键菜单，因为，人家给封装好了 右键点击鼠标事件，以及点击鼠标右键事件时杀掉了系统的右击事件

	<el-tree
    :data="data"
    :props="defaultProps"
    node-key="id"
    accordion
    :expand-on-click-node="false"  // 只能点击箭头才能显示子级列表
    @node-contextmenu="rightClick" // 鼠标右键触发的事件
    :highlight-current="true"	    // 高亮
    @node-click="handleNodeClick"> // 鼠标点击触发的事件
</el-tree>

<!--鼠标右键菜单栏，其实就是添加一个基于鼠标位置的模态框而已 -->

<div v-show="menuVisible">
   <ul id="menu" class="menu">
     <li class="menu__item" @click="isAddCardPing = true">平级添加</li>
     <li class="menu__item" @click="addCard">下级添加</li>
     <li class="menu__item" @click="deleteCard">删除</li>
   </ul>
</div>

其实不难，自己静下心来想想弄成模态框就好了，困难的就是 显示模态框容易，怎样监听鼠标事件，鼠标点击任何位置（包括点击点击了菜单）让模态框消失，先看一下文档

不防我们打印一下这四个参数看一下，
其实参数有很多，其他的就是项目上使用的，我只说右键菜单使用到的，就是有红框里面的参数，指的是鼠标在屏幕任何位置点击右键的时候的坐标，我们要做的就是基于鼠标位置来做右键自定义菜单，以下是我自己码的代码⤵️

   rightClick(MouseEvent, object, Node, VueComponent) { // 鼠标右击触发事件
        this.menuVisible = false
        if (Node.level <= 3) {
          this.menuVisible = true
          var menu = document.querySelector('#menu')
          menu.style.left = MouseEvent.clientX - 160 + 'px'
          document.addEventListener('click', this.foo)
          menu.style.top = MouseEvent.clientY - 10 + 'px'
        } else {
          this.menuVisibleDelete = true
          var menuDelete = document.querySelector('#menu_delete')
          menuDelete.style.left = MouseEvent.clientX - 160 + 'px'
          document.addEventListener('click', this.fooDelete)
          menuDelete.style.top = MouseEvent.clientY - 10 + 'px'
        }
        console.log('右键被点击的MouseEvent:', MouseEvent)
        console.log('右键被点击的object:', object)
        console.log('右键被点击的Node:', Node)
        console.log('右键被点击的VueComponent:', VueComponent)
        console.log('鼠标点击了树形结构图')
        this.isEdit = false // 每次点击左侧让右侧按钮回复默认
        this.IOList = [] // 清空复选框数组
        this.isDisplay = true // 每次点击左侧 右侧显示
        this.cardData.name = object.tierName // 层级名称
        this.cardData.tierLevel = object.tierLevel // 层级
        switch (this.cardData.tierLevel) {
          case 1:
            this.cardData.layer = '小区层级'
            break
          case 2:
            this.cardData.layer = '楼栋层级'
            break
          case 3:
            this.cardData.layer = '单元层级'
            break
          case 4:
            this.cardData.layer = '门户层级'
            break
        }
        if (object.tierLevel >= 3) {
          this.isJump = false
        } else {
          this.isJump = true
        }
        this.cardData.id = object.id // 当前点击的id
        this.$request({ // 获取编辑项数据
          url: '/modules/tierRelation/tierRelationList',
          method: 'post',
          data: {
            id: this.cardData.id
          }
        }).then(response => {
          this.tableData = response.data
          this.form.type = response.data.skip || false
          response.data.forEach(item => { // 遍历循环
            if (item.must) {
              this.checkBox.push(item.id)
            }
          })
          this.checkBox.forEach(item => {
            this.IOList.push({ id: item, must: true })
          })
        }).catch(() => {
          console.log('error')
        })
      }

我知道对于像我刚看的时候的心情，很多很杂，我当时看的时候头都炸了，我就筛选一下，给大家一个 拿来直接能用的，

    rightClick(MouseEvent, object, Node, element) { // 鼠标右击触发事件
        this.menuVisible = false // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
        this.menuVisible = true  // 显示模态窗口，跳出自定义菜单栏
        var menu = document.querySelector('#menu') 
        menu.style.left = MouseEvent.clientX - 160 + 'px'
        document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
        menu.style.top = MouseEvent.clientY - 10 + 'px'
        console.log('右键被点击的event:', MouseEvent)
        console.log('右键被点击的object:', object)
        console.log('右键被点击的value:', Node)
        console.log('右键被点击的element:', element)
        console.log('鼠标点击了树形结构图')
      }
     foo() { // 取消鼠标监听事件 菜单栏
        this.menuVisible = false
        document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
      },

如果我是呢个上网找直接能用的就好了的人，肯定会要css，啊哈哈，我是按照Mac右键菜单颜色配的色，你们可以随意配色和自定义菜单

  .menu__item {
    display: block;
    line-height: 20px;
    text-align: center;
    margin-top: 10px;
  }
    .menu {
    height: 100px;
    width: 100px;
    position: absolute;
    border-radius: 10px;
    border: 1px solid #999999;
    background-color: #f4f4f4;
  }
   li:hover {
    background-color: #1790ff;
    color: white;
  }

完美，我把我花了半天搞出来的自定义菜单搞出来，并且梳理了一遍，梳理的同时我也有再一次的学习了一遍，梳理的同时我也是如果下次项目里面有这样子的需求直接复制粘贴就好了，有不足的地方请大家联系我，我必改，如果真的能帮到大家，我心里其实是挺开心的，毕竟我只是一个来北京实习一个月的前端小白，在北京呆了5个月了，知识是不断在涨的，如果能帮到你们，真的很开心，