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 =falseif(Node.level <=3){this.menuVisible =truevar 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 =truevar 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){case1:this.cardData.layer ='小区层级'breakcase2:this.cardData.layer ='楼栋层级'breakcase3:this.cardData.layer ='单元层级'breakcase4:this.cardData.layer ='门户层级'break}if(object.tierLevel >=3){this.isJump =false}else{this.isJump =true}this.cardData.id = object.id // 当前点击的idthis.$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次右键鼠标的时候 它默认的是truethis.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个月了，知识是不断在涨的，如果能帮到你们，真的很开心，