Vue+Antd 菜单 2021-06-04

<template>
  <div class="menu-box"
       v-if="moduleMenuList && moduleMenuList.length"
  >
    <Menu
      class="menu"
      mode="inline"
      v-model="selected"
      theme="light"
      :inline-collapsed="collapsed"
    >
      <template v-for="(item, index) in menuList">
        <MenuItem v-if="!item.subModule" :key="index" @click="() => handleClickMenu(item, index)" >
          <Icon type="desktop" />
          <span>{{item.title}}</span>
        </MenuItem>
        <MenuSubMenu v-if="item.subModule" :key="index"  >
          <span slot="title">
            <Icon type="desktop" />
            <span>{{item.title}}</span>
          </span>
          <template v-for="(item2, index2) in item.subModule" >
            <MenuItem :key="`${index}-${index2}`" >
              {{item2.title}}
            </MenuItem>
          </template>
        </MenuSubMenu>
      </template>
    </Menu>
    <Button
      class="menu-collapsed" type="primary" style="margin-bottom: 16px" @click="toggleCollapsed"
    >
      <Icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </Button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapState } from 'vuex';
import { Menu, Button, Icon } from 'ant-design-vue';

const MenuItem = Menu.Item;
const MenuSubMenu = Menu.SubMenu;

export default Vue.extend({
  name: 'menuPage',
  data() {
    return {
      collapsed: false,
      selected: [0],
    };
  },
  components: {
    Menu,
    MenuSubMenu,
    MenuItem,
    Button,
    Icon,
  },
  computed: {
    ...mapState([
      'menuList',
    ]),
    handChangeMenuList() {
      return this.$store.state.menuList;
    },
  },
  mounted() {
  },
  methods: {
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    handleClickMenu(item, index) {
      if (this.$route.path !== item.path) {
        this.$router.push(item.path);
        this.selected = index;
      }
    },
  },
  watch: {
    handChangeMenuList: {
      handler(val) {
        if (val && val.length) {
          this.selected = [0];
        }
      },
    },
  },
});
</script>

<style lang="less" scoped>
.menu-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .menu {
    flex: 1 1 auto;
  }
  .menu-collapsed {
    width: 100%;
    flex: 0 0 40px;
  }
}
</style>