vue仿阿里云二级下拉导航菜单

最新推荐文章于 2024-04-25 15:57:52 发布
菜里亚批
最新推荐文章于 2024-04-25 15:57:52 发布
阅读量1.2k
点赞数 1
分类专栏： vue 文章标签： vue.js 阿里云 elementui
本文链接：https://blog.csdn.net/bo222/article/details/124859131
版权
vue 专栏收录该内容
3 篇文章 0 订阅
订阅专栏
我是根据apidata进行的数据处理，大家如果有同样的需求可以参考下思路
<template>
  <div id="">

    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title" id="tab_test">我的工作台</template>
        <div class="menu-dropdown-inner" style="width: 932px; left: 0px; overflow: auto; height: 500px; z-index: 0;">
          <!-- 具体代码实现 -->

          <!-- 左侧导航 -->
          <div class="menu-dropdown-sidebar pull-left" id="pull-left" style="height: 100%; background-color: #F5F5F5;">

            <ul id="pull-left-ul" style="list-style: none;">
              <li v-for="item in apidata" :key="item.id" :id="item.id" @mouseenter="test1(item.nodeList, item.id)">
                {{item.name}}
              </li>
            </ul>

          </div>

          <!-- 右侧导航 -->
          <div class="menu-dropdown-content" style="height: 100%;">

            <div id="pullright" style="width: 100%; float: right;">
              <div id="pullright1" v-for="item in maindata" :key="item.id"
                style="width: 30%; float: left; padding-left: 20px;">
                <p style="font-weight: bold; color: #0000FF;">{{item.name}}</p>
                <p v-for="son_item in item.leafList" :key="son_item.id" :id="son_item.id"
                  @mouseenter="testMouseenter(son_item.id)" @mouseleave="testMouseleave(son_item.id)">
                  <a :href="son_item.url" target="_blank">{{son_item.name}}</a>
                </p>
              </div>
            </div>

            <!--
              <dl v-for="item in maindata" :key="item.id">
                <dt style="font-weight: bold;">{{item.name}}</dt>
                <dd v-for="son_item in item.leafList" :key="son_item.id">
                <a :href="son_item.url" target="_blank">{{son_item.name}}</a>
                </dd>
              </dl> -->

          </div>

          <!-- 华丽的分割线 -->
        </div>

      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    <div class="line"></div>

  </div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: "tabHover",
    data() {
      return {
        activeIndex: '1',
        data_tab: [{
            index: 2 - 1,
            value: "测试1"
          },
          {
            index: 2 - 2,
            value: "测试2"
          },
          {
            index: 2 - 3,
            value: "测试3"
          },
        ],
        from_data: [],
        index: 1,
        maindata: [],
        Asidedata: [],
        apidata: [{ // 模拟的接口数据
            "id": "1522392995074473985",
            "parentId": null,
            "path": "/1522392995074473985",
            "name": "弹性计算",
            "orderNo": "1522392995074473985",
            "nodeList": [{
                "id": "1522392995615539202",
                "parentId": "1522392995074473985",
                "path": "/1522392995074473985/1522392995615539202",
                "name": "云服务器",
                "orderNo": "1522392995615539202",
                "nodeList": null,
                "leafList": [{
                    "id": "1522392996378902529",
                    "categoryId": "1522392995615539202",
                    "name": "云服务器ECS",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392996378902529"
                  },
                  {
                    "id": "1522392996718641154",
                    "categoryId": "1522392995615539202",
                    "name": "轻量应用服务器",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392996718641154"
                  },
                  {
                    "id": "1522392997049991170",
                    "categoryId": "1522392995615539202",
                    "name": "GPU 云服务器",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392997049991170"
                  }
                ]
              },
              {
                "id": "1522392997398118402",
                "parentId": "1522392995074473985",
                "path": "/1522392995074473985/1522392997398118402",
                "name": "无影云电脑",
                "orderNo": "1522392997398118402",
                "nodeList": null,
                "leafList": [{
                    "id": "1522392997922406401",
                    "categoryId": "1522392997398118402",
                    "name": "无影云桌面",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392997922406401"
                  },
                  {
                    "id": "1522392998262145025",
                    "categoryId": "1522392997398118402",
                    "name": "无影云硬件终端",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392998262145025"
                  }
                ]
              },
              {
                "id": "1522392998601883650",
                "parentId": "1522392995074473985",
                "path": "/1522392995074473985/1522392998601883650",
                "name": "弹性编排",
                "orderNo": "1522392998601883650",
                "nodeList": null,
                "leafList": [{
                    "id": "1522392999121977346",
                    "categoryId": "1522392998601883650",
                    "name": "弹性伸缩",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392999121977346"
                  },
                  {
                    "id": "1522392999461715970",
                    "categoryId": "1522392998601883650",
                    "name": "资源编排",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392999461715970"
                  },
                  {
                    "id": "1522392999818231810",
                    "categoryId": "1522392998601883650",
                    "name": "运维编排 OOS",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522392999818231810"
                  }
                ]
              }
            ],
            "leafList": null
          },
          {
            "id": "1522393000157970433",
            "parentId": null,
            "path": "/1522393000157970433",
            "name": "存储",
            "orderNo": "1522393000157970433",
            "nodeList": [{
                "id": "1522393000489320449",
                "parentId": "1522393000157970433",
                "path": "/1522393000157970433/1522393000489320449",
                "name": "基础存储服务",
                "orderNo": "1522393000489320449",
                "nodeList": null,
                "leafList": [{
                    "id": "1522393001152020481",
                    "categoryId": "1522393000489320449",
                    "name": "块存储 EBS",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393001152020481"
                  },
                  {
                    "id": "1522393001487564801",
                    "categoryId": "1522393000489320449",
                    "name": "对象存储 OSS",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393001487564801"
                  },
                  {
                    "id": "1522393001827303426",
                    "categoryId": "1522393000489320449",
                    "name": "文件存储 NAS",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393001827303426"
                  }
                ]
              },
              {
                "id": "1522393002162847745",
                "parentId": "1522393000157970433",
                "path": "/1522393000157970433/1522393002162847745",
                "name": "存储数据服务",
                "orderNo": "1522393002162847745",
                "nodeList": null,
                "leafList": [{
                    "id": "1522393002678747138",
                    "categoryId": "1522393002162847745",
                    "name": "日志存储 SLS",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393002678747138"
                  },
                  {
                    "id": "1522393003010097153",
                    "categoryId": "1522393002162847745",
                    "name": "云备份 HBR",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393003010097153"
                  },
                  {
                    "id": "1522393003341447169",
                    "categoryId": "1522393002162847745",
                    "name": "智能媒体管理 IMM",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393003341447169"
                  }
                ]
              },
              {
                "id": "1522393003681185793",
                "parentId": "1522393000157970433",
                "path": "/1522393000157970433/1522393003681185793",
                "name": "混合云存储",
                "orderNo": "1522393003681185793",
                "nodeList": null,
                "leafList": [{
                    "id": "1522393004197085186",
                    "categoryId": "1522393003681185793",
                    "name": "混合云存储",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393004197085186"
                  },
                  {
                    "id": "1522393004532629506",
                    "categoryId": "1522393003681185793",
                    "name": "云存储网关 CSG",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393004532629506"
                  },
                  {
                    "id": "1522393004880756737",
                    "categoryId": "1522393003681185793",
                    "name": "混合云容灾 HDR",
                    "url": "https://www.baidu.com",
                    "orderNo": "1522393004880756737"
                  }
                ]
              }
            ],
            "leafList": null
          }
        ]

      };
    },
    created() {
      this.get_data();
    },
    methods: {
      test1(val, itemId) {

        console.log("test1:", val)
        this.maindata = val;
        let leftUl = document.getElementById('pull-left-ul')

        // 把左侧的li color展示成黑色
        let leftLi = leftUl.childNodes;
        for (let index = 0; index < leftLi.length; index++) {
          leftLi[index].style.color = "#000";
        }


        // 获取左侧div的高度 pull-left
        let pullLeft = document.getElementById('pull-left');
        console.log("div的宽度", pullLeft.style.height)

        // itemId 设置左侧的数据上去的颜色
        let itemIdDoc = document.getElementById(itemId);
        itemIdDoc.style.color = '#0000FF'

        // pull-right
        let pullright = document.getElementById('pullright');
        console.log("pullright,", pullright.style.width)

        // pull-right
        let pullright1 = document.getElementById('pullright1');
        console.log("pullright1,", pullright1.style.width)

      },
      testMouseleave(itemId) {
        // 左侧标签离开切换颜色
        let itemIdDoc = document.getElementById(itemId);
        console.log("testMouseleave:", itemId)
        itemIdDoc.style.color = '#000';

        // a标签离开切换颜色
        let timeA = itemIdDoc.getElementsByTagName('a');
        console.log("timeA:", timeA)
        timeA[0].style.color = '#000';


      },
      testMouseenter(itemId) {
        let itemIdDoc = document.getElementById(itemId);
        console.log("testMouseenter:", itemId)

        let timeA = itemIdDoc.getElementsByTagName('a');
        console.log("timeA:", timeA)
        timeA[0].style.color = '#0000FF';
      },



      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      get_data() {
        console.log("hover...")
        let url = "http://XXX"; // 后续可实现接口进行数据传输实现，以后有数据改动就不需要改前端了
        axios.get(url).then(res => {
          console.log(res.status)
          if (res.status == 200) {
            this.from_data = res.data.data;
          }
        });
      }
    }
  }
</script>

<style>
  a {
    text-decoration: none;
    color: #000;
  }

/*  .menu-dropdown-inner {
    margin: 0;
    padding: 0;
  } */

  .menu-dropdown-sidebar {
    width: 162px;
    height: auto;
    padding: 19px 10px 15px 21px;
    border: 1px solid black;
    float: left;
    /* line-height: 18px; */
    color: #333;
  }

  .menu-dropdown-content {
    background-color: #fff;
    margin-left: 193px;
    padding: 25px 0 0 20px;
    color: #333;
    border: 1px solid red;
  }

  #pull-left-ul li {
    /* 展示小手样式 */
    cursor: pointer;
    /* padding-top: 10px; */
    /* padding-left: 30px; */
    line-height: 40px;
  }


  /*  #tab_content {
    width: 1000px;
    height: 500px;
    width: calc(100vw - 200px);
    height: calc(100vw - 1300px);
    border: 1px solid red;
    background-color: skyblue;
    position: relative;
  } */

  /*  .content_test {
    position: absolute;
      top: 50px;
      left: 50px;
      width: 200px;
  } */
  /*  span{
      margin-top: 10px;
      word-break:normal;
      width:auto;
      display:block;
      white-space:pre-wrap;
      word-wrap : break-word ;
      overflow: hidden ;
  } */
</style>
效果图1