vue 树形菜单事件 右击自定义菜单

效果图：

 

精髓代码：

父组件：

      树形结构加自定义菜单

                  <div class="treesclass">
                    <my-tree
                      :data="theData"
                      :name="menuName"
                      :loading="loading"
                      @getSubMenu="getSubMenu"
                    ></my-tree>
                  </div>
                  <ul class="dropdown-menu" id="msgRightMenu">
                    <li>
                      <a id="adddepart" style="text-align:center">添加</a>
                      <!--// @click="addDepart" -->
                    </li>
                    <li>
                      <a href="#" style="text-align:center">修改</a>
                    </li>
                    <li>
                      <a href="#" style="text-align:center">删除</a>
                    </li>
                  </ul>

引入树体

import myTree from "./treeMenu.vue";

定义树体及数据

 data() {
    return {
      theData: myData,
      menuName: "menuName", // 显示菜单名称的属性
      loading: false
    };
  },

获取树体传输的数据

 methods: {
    //获取到 树体传来的数据
    getSubMenu(item, index) {
      alert("item" + item);
      alert("getSubMenu" + item);
   }
}

子组件：

树体信息:

<ul class="tree-menu">
    <li v-for="(item, index) in data">
      <span @click="toggle(item, index)" @contextmenu.prevent="rightBtn(item,index)">
        <i
          :class="['icon', item.children && item.children.length ? folderIconList[index] : 'file-text', loading ? loadingIconList[index] : '']"
        ></i>
        {{ item[name] || item.menuName }}
      </span>
      <tree-menu v-if="scope[index]" :data="item.children" @contextmenu.prevent="rightBtn(item)"></tree-menu>
    </li>
  </ul>

接受数据：

 props: {
    data: Array,
    name: String,
    loading: Boolean
  },

定义子组件数据：

data() {
    return {
      folderIconList: [],
      loadingIconList: [],
      scope: {},
      menuName: ""
    };
  },

定义方法：

 doTask(index) {
      this.$set(this.scope, index, !this.scope[index]);
      this.folderIconList[index] = this.scope[index] ? "folder-open" : "folder";
    },
    toggle(item, index) {
      // alert(item.menuName);

      //this.$emit("getSubMenu", item.menuName);
      this.loadingIconList = [];
      //alert(item.menuName+'   '+index);
      if (item.children && item.children.length) {
        this.doTask(index);
      } else {
        this.loadingIconList[index] = "loading";

        this.$emit("getSubMenu", item, subMenuList => {
          if (subMenuList && subMenuList.length) {
            this.doTask(index);
          }
        });
      }
    },

右击自定义菜单：

 //右击出现功能菜单
    rightBtn(item, index) {
      this.menuName = item.menuName;
      var menuname = this.menuName;
       //有问题  子节点触发外部事件
      //alert("长度" + item.id.length + "   " + item.id);
      if (item.id.length == 1) {
        this.$emit("getSubMenu", menuname);
      } else if (item.id.length == 2) {
        var that = this.$parent;
        that.$emit("getSubMenu", menuname);
      } else if (item.id.length == 3) {
        var that = this.$parent.$parent;
        that.$emit("getSubMenu", menuname);
      } else if (item.id.length == 4) {
        var that = this.$parent.$parent.$parent;
        that.$emit("getSubMenu", menuname);
      }

      //this.$parent.$emit("getSubMenu",menuname);
      let menu = document.getElementById("msgRightMenu");
      var e = e || window.event;
      var marginWidths = 400;
      var marginHeight = 110;

      //鼠标点的坐标
      var oX = e.clientX - marginWidths;
      var oY = e.clientY - marginHeight;
      if (oX > 423) {
        oX = 423;
      }
      //菜单出现后的位置
      menu.style.display = "block";
      menu.style.left = oX + 130 + "px";
      menu.style.top = oY - 50 + "px";
      document.onclick = function() {
        document.getElementById("msgRightMenu").style.display = "none";
      };

      //阻止浏览器默认事件
      return false; //一般点击右键会出现浏览器默认的右键菜单，写了这句代码就可以阻止该默认事件
    }

差不多了!OK