ABP实践(5)-abp前端vue框架之IView实现三级菜单(博友需要特此分享)

为响应博友想要知道三级菜单怎么实现本篇文章先介绍三级菜单的实现,后续再分享其他部分内容

1 修改菜单组件sidebarMenu.vue

• 图为原代码和修改后代码比对
  
• 修改前后的源码如下

<style lang="less">
@import "../styles/menu.less";
</style>

<template>
  <Menu
    ref="sideMenu"
    :active-name="$route.name"
    :open-names="openNames"
    :theme="menuTheme"
    width="auto"
    @on-select="changeMenu"
  >
    <template v-for="item in menuList">
      <MenuItem v-if="item.children.length<=0" :name="item.children[0].name" :key="item.name">
        <!-- <Icon :type="item.icon" :size="iconSize"></Icon> -->
        <span class="iconfont">{{item.icon}}</span>
        <span>{{ itemTitle(item) }}</span>
      </MenuItem>
      <!-- <Submenu v-if="item.children.length > 0" :name="item.name" :key="item.name">
        <template slot="title">
          <i class="iconfont" v-html="item.icon"></i>
          <span>{{ itemTitle(item) }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem :name="child.name" :key="child.name">
            <i class="iconfont" v-html="child.icon"></i>
            <span>{{ L(child.meta.title) }}</span>
          </MenuItem>
        </template>
      </Submenu>-->
      <Submenu v-if="item.children.length > 0" :name="item.name" :key="item.name">
        <template slot="title">
          <i class="iconfont" v-html="item.icon"></i>
          <span>{{ itemTitle(item) }}</span>
        </template>
        <template v-for="child in item.children">
          <MenuItem v-if="!isChild(child.children)" :name="child.name" :key="child.name">
            <i class="iconfont" v-html="child.icon"></i>
            <span>{{ L(child.meta.title) }}</span>
          </MenuItem>
          <Submenu v-else :name="child.name" :key="child.name">
            <template slot="title">
              <i class="iconfont" v-html="child.icon"></i>
              <span>{{ itemTitle(child) }}</span>
            </template>
            <template v-for="child in child.children">
              <MenuItem v-if="!isChild(child.children)" :name="child.name" :key="child.name">
                <i class="iconfont" v-html="child.icon"></i>
                <span>{{ L(child.meta.title) }}</span>
              </MenuItem>
            </template>
          </Submenu>
        </template>
      </Submenu>
    </template>
  </Menu>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Emit } from "vue-property-decorator";
import AbpBase from "../../../lib/abpbase";
@Component({})
export default class SidebarMenu extends AbpBase {
  name: string = "sidebarMenu";
  @Prop({ type: Array }) menuList: Array<any>;
  @Prop({ type: Number }) iconSize: number;
  @Prop({ type: String, default: "dark" }) menuTheme: string;
  @Prop({ type: Array }) openNames: Array<string>;
  itemTitle(item: any): string {
    return this.L(item.meta.title);
  }
  @Emit("on-change")
  changeMenu(active: string) {}
  updated() {
    this.$nextTick(() => {
      if (this.$refs.sideMenu) {
        (this.$refs.sideMenu as any).updateActiveName();
      }
    });
  }

  isChild(item) {
    if (item && item.length > 0) {
      return true;
    } else {
      return false;
    }
  }
}
</script>

2 修改路由菜单配置文件router.ts

• 在新增的内容里有注释(第三级菜单),全部代码如下

declare global {
    interface RouterMeta {
        title: string;
    }
    interface Router {
        path: string;
        name: string;
        icon?: string;
        permission?: string;
        meta?: RouterMeta;
        component: any;
        children?: Array<Router>;
    }
    interface System {
        import(request: string): Promise<any>
    }
    var System: System
}
import login from '../views/login.vue'
import home from '../views/home/home.vue'
import main from '../views/main.vue'

export const locking = {
    path: '/locking',
    name: 'locking',
    component: () => import('../components/lockscreen/components/locking-page.vue')
};
export const loginRouter: Router = {
    path: '/',
    name: 'login',
    meta: {
        title: 'LogIn'
    },
    component: () => import('../views/login.vue')
};
export const otherRouters: Router = {
    path: '/main',
    name: 'main',
    permission: '',
    meta: { title: 'ManageMenu' },
    component: main,
    children: [
        { path: 'home', meta: { title: 'HomePage' }, name: 'home', component: () => import('../views/home/home.vue') }
    ]
}
export const appRouters: Array<Router> = [{
    path: '/setting',
    name: 'setting',
    permission: '',
    meta: { title: 'ManageMenu' },
    icon: '&#xe68a;',
    component: main,
    children: [
        { path: 'user', permission: 'Pages.Users', meta: { title: 'Users' }, name: 'user', component: () => import('../views/setting/user/user.vue') },
        { path: 'role', permission: 'Pages.Roles', meta: { title: 'Roles' }, name: 'role', component: () => import('../views/setting/role/role.vue') },
        { path: 'tenant', permission: 'Pages.Tenants', meta: { title: 'Tenants' }, name: 'tenant', component: () => import('../views/setting/tenant/tenant.vue') },
        { path: 'goods', permission: 'Pages.Goods', meta: { title: 'Goods' }, name: 'goods', component: () => import('../views/setting/goods/goods.vue') },
        //第三级菜单
        {
            path: '/main', permission: 'Pages.Goods', meta: { title: 'GoodsManage' }, name: 'goodsManage', component: main,
            children: [
                { path: 'goods', permission: 'Pages.Goods', meta: { title: 'Goods' }, name: 'goods', component: () => import('../views/setting/goods/goods.vue') }
            ]
        }
    ]
}]
export const routers = [
    loginRouter,
    locking,
    ...appRouters,
    otherRouters
];

知道如何实现三级菜单可以考虑一下怎么实现无限级菜单(以后有时间再分享)

原文地址：https://www.cnblogs.com/wuyubing/p/12613562.html