2020-10-24

<template>
  <div class="leftNav">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <!-- 
           <a-menu theme="dark" 
        :openKeys="openKeys" // 重点 当前展开的菜单
        mode="inline"
        @openChange="onOpenChange" // 重点 当可以展开的菜单被点击时
        :defaultSelectedKeys="defaultSelectedKeys" // 默认选中的菜单
        style="width: 100%"
       >
      <template v-for="item in menuList"> // 渲染菜单列表
        <a-menu-item v-if="item.children === false" :key="item.router"> // 顶级菜单
          <span>{{ item.name }}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="item.router"> // 可以展开的二级菜单
          <span slot="title"><span>{{ item.name }}</span></span>
          <a-menu-item v-for="menuChildren in item.children" :key="menuChildren.router">{{ menuChildren.name }}</a-menu-item>
        </a-sub-menu>
      </template>
      </a-menu>

       -->
      <a-menu
        theme="dark"
        :openKeys="openKeys"
        mode="inline"
        @openChange="onOpenChange"
        :defaultSelectedKeys="defaultSelectedKeys"
        @select="clickItem"
        style="width: 100%"
      >
        <template v-for="item in menuList">
          <a-menu-item v-if="item.children === false" :key="item.router">
            <span>{{ item.name }}</span>
          </a-menu-item>
          <a-sub-menu v-else :key="item.router">
            <span slot="title"
              ><span>{{ item.name }}</span></span
            >
            <a-menu-item
              v-for="menuChildren in item.children"
              :key="menuChildren.router"
              >{{ menuChildren.name }}</a-menu-item
            >
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: {
    collapsed: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      defaultSelectedKeys: ["/home/index"],
      openKeys: [""],
      menuList: [], // 此处为动态获取的菜单数组
    };
  },
  created() {},
  mounted() {
    this.pathAXios();
  },
  methods: {
    pathAXios() {
      let jsonList = [
        {
          name: "首页",
          router: "/home/index",
          children: false,
        },
        {
          name: "商品管理",
          router: "/shop", // 点击这个菜单不会跳转 只会展开 此处的router是为了设置key属性
          children: [
            {
              name: "商品分类",
              router: "/home/shopClass",
            },
            {
              name: "商品列表",
              router: "/home/shopList",
            },
          ],
        },
        {
          name: "个人设置",
          router: "/user",
          children: [
            {
              name: "我的资料",
              router: "/home/userEdit",
            },
            {
              name: "登录记录",
              router: "/home/userLoginRecord",
            },
          ],
        },
      ];
      this.menuList = jsonList;
      // this.xhmenu(jsonList);
    },
    xhmenu(result) {
      // for (let i = 0; i < this.menuList.length; i++) {
      //   //循环【顶级菜单数组列表】 循环的数组下标用i表示
      //   if (result[i].children !== false) {
      //     // 如果这个菜单没有【子菜单】 就不继续了（没有子菜单就是【点击可跳转页面但不会展开】的顶级菜单）
      //     for (let y = 0; y < result[i].children.length; y++) {
      //       // 循环【顶级菜单】的子菜单数组（二级菜单）数组下标用y表示
      //       if (result[i].children[y].router === this.$route.path) {
      //         // 如果子菜单的router数据和当前路由地址一样 则断定现在的页面就停留在这个数组对应的菜单中
      //         this.openKeys = [result[i].router];
      //         // 那么就把【顶级菜单（循环数组下标为i）的router属性】赋值给this.openKeys【data中当前展开的菜单】
      //       }
      //     }
      //   }
      // }
    },

    onOpenChange(openKeys) {
      // 当菜单被展开时触发此处
      /* 
      经测试传入的变量openKeys是数组 点击已经展开的菜单时传入的是空数组
      点击未展开的菜单时传入的是[当前展开菜单的key,点击的菜单key]
      下面的if判断用openKeys === [] 无效 所以我只能判断数组length是否等于0
      */
      if (openKeys.length !== 0) {
        this.openKeys = [openKeys[1]];
      } else {
        this.openKeys = [""];
      }
    },
    clickItem(obj) {
      // console.log(obj);
      // this.$router.push(obj.key);
    },
  },
};
</script>

<style scoped lang="less">
.leftNav {
  height: 100%;
  background: #001529;
}
#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>