vue中使用wheelnav.js(2)

根据wheelnav创建三级菜单，最终效果如下：

 关键点在于菜单按钮的隐藏和显示，之前试过多个div位置叠加的，也成功了，但是会出现一级菜单的那个div挡这二级菜单的一部分，需要将鼠标移动到二级菜单边缘位置才可点击，后来研究成功这种的一个div显示三级菜单。

<div id="wheelDiv" style="position:absolute; left:200px; top:200px" ></div>
<div id="wheel2"></div>
<div id="wheel3"></div>

var that = this;
    var tooltips = ["1-1","1-2","1-3","1-4"];
    var subMenu = ["2-1","2-2","2-3","2-4","2-5","2-6","2-7","2-8"];

    // 一级菜单初始化
    this.wheel1_1 = new window.wheelnav('wheelDiv', null, 600, 600);
    this.wheel1_1.slicePathFunction = window.slicePath().DonutSlice;
    this.wheel1_1.centerX = 300;
    this.wheel1_1.centerY = 300;
    var custom = new window.slicePathCustomization();
          custom.minRadiusPercent = 0.1;
          custom.maxRadiusPercent = 0.4;
    this.wheel1_1.slicePathCustom = custom;
    this.wheel1_1.sliceSelectedPathCustom = custom
    this.wheel1_1.sliceInitPathCustom = custom
    this.wheel1_1.clickModeRotate = false;
    this.wheel1_1.navAngle = 45;
    this.wheel1_1.selectedNavItemIndex = null
    this.wheel1_1.createWheel(tooltips);

    for(var i = 0; i != tooltips.length;++i)
    {
        this.wheel1_1.navItems[i].setTooltip(tooltips[i])
        this.wheel1_1.navItems[i].navItem[0].node.setAttribute("onmouseover", "handleMouse1Event(evt,"+ i +")")
        this.wheel1_1.navItems[i].navItem[2].node.setAttribute("onmouseover", "handleMouse1Event(evt,"+ i +")")
    }
    
    this.wheel1_22 = new window.wheelnav('wheel2', that.wheel1_1.raphael);
    this.wheel1_22.slicePathFunction = window.slicePath().DonutSlice;
    this.wheel1_22.centerX = 300;
    this.wheel1_22.centerY = 300;
    this.wheel1_22.clickModeRotate = false;
    var custom13 = new window.slicePathCustomization();
          custom13.minRadiusPercent = 0.4;
          custom13.maxRadiusPercent = 0.7;
    this.wheel1_22.slicePathCustom = custom13;
    this.wheel1_22.sliceSelectedPathCustom = custom13
    this.wheel1_22.sliceInitPathCustom = custom13
    this.wheel1_22.selectedNavItemIndex = null
    this.wheel1_22.navAngle = 360 / subMenu.length / 2;
    this.wheel1_22.createWheel(subMenu);

    for (var q = 0; q != this.wheel1_22.navItems.length; ++q) {
        that.wheel1_22.navItems[q].navItem[0].node.style.display = "none";
        that.wheel1_22.navItems[q].navItem[1].node.style.display = "none";
        that.wheel1_22.navItems[q].navItem[2].node.style.display = "none";
        that.wheel1_22.navItems[q].navItem[0].node.setAttribute("onmouseover", "handleMouse2Event(evt,"+ q +")")
        that.wheel1_22.navItems[q].navItem[2].node.setAttribute("onmouseover", "handleMouse2Event(evt,"+ q +")")
    }
    
    this.wheel1_33 = new window.wheelnav('wheel3', that.wheel1_1.raphael);
    this.wheel1_33.slicePathFunction = window.slicePath().DonutSlice;
    this.wheel1_33.centerX = 300;
    this.wheel1_33.centerY = 300;
    this.wheel1_33.clickModeRotate = false;
    var custom133 = new window.slicePathCustomization();
          custom133.minRadiusPercent = 0.7;
          custom133.maxRadiusPercent = 1;
    this.wheel1_33.slicePathCustom = custom133;
    this.wheel1_33.sliceSelectedPathCustom = custom133
    this.wheel1_33.sliceInitPathCustom = custom133
    this.wheel1_33.selectedNavItemIndex = null
    this.wheel1_33.navAngle = 9;
    subMenu = ["3-1","3-2","3-3","3-4","3-5","3-6","3-7","3-8","3-9","3-10","3-11","3-12","3-13","3-14","3-15","3-16"];
    this.wheel1_33.navAngle = 360 / subMenu.length / 2;
    this.wheel1_33.titleRotateAngle = 0;
    this.wheel1_33.createWheel(subMenu);

    for (var qq = 0; qq != this.wheel1_33.navItems.length; ++qq) {
        that.wheel1_33.navItems[qq].navItem[0].node.style.display = "none";
        that.wheel1_33.navItems[qq].navItem[1].node.style.display = "none";
        that.wheel1_33.navItems[qq].navItem[2].node.style.display = "none";
    }
    
    window['handleMouse2Event'] = function(e,currNodeId) {
     
      for (var qq3 = 0; qq3 != that.wheel1_33.navItems.length; ++qq3) {
          that.wheel1_33.navItems[qq3].navItem[0].node.style.display = "none";
          that.wheel1_33.navItems[qq3].navItem[1].node.style.display = "none";
          that.wheel1_33.navItems[qq3].navItem[2].node.style.display = "none";
      }

      for (var q3 = currNodeId *2; q3 != currNodeId *2 + 2; ++q3) {
        if(q3 < that.wheel1_33.navItems.length)
        {
          that.wheel1_33.navItems[q3].navItem[0].node.style.display = "block";
          that.wheel1_33.navItems[q3].navItem[1].node.style.display = "block";
          that.wheel1_33.navItems[q3].navItem[2].node.style.display = "block";
        }
      }
    }
      
  window['handleMouse1Event'] = function(e,currNodeId) {
    for (var qq3 = 0; qq3 != that.wheel1_33.navItems.length; ++qq3) {
        that.wheel1_33.navItems[qq3].navItem[0].node.style.display = "none";
        that.wheel1_33.navItems[qq3].navItem[1].node.style.display = "none";
        that.wheel1_33.navItems[qq3].navItem[2].node.style.display = "none";
    }
    for (var q = 0; q != that.wheel1_22.navItems.length; ++q) {
      that.wheel1_22.navItems[q].navItem[0].node.style.display = "none";
      that.wheel1_22.navItems[q].navItem[1].node.style.display = "none";
      that.wheel1_22.navItems[q].navItem[2].node.style.display = "none";
    }

    for (var q1 = currNodeId * 2; q1 != currNodeId * 2 + 2; ++q1) {
      if(q1 < that.wheel1_22.navItems.length)
      {
        that.wheel1_22.navItems[q1].navItem[0].node.style.display = "block";
        that.wheel1_22.navItems[q1].navItem[1].node.style.display = "block";
        that.wheel1_22.navItems[q1].navItem[2].node.style.display = "block";
      }
    }
  }

wheelnav引入和使用可看我之前的vue中使用wheelnav.js