lg_frontend/layouts/manager.vue

<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider :trigger="null" v-model="collapsed" collapsible>
      <div class="logo">
        欢迎
      </div>
      <a-menu theme="dark" mode="inline" v-model="selectedKeys">
        <a-menu-item key="1" v-for="item in menus" :key="item.key">
          <a-icon :type="item.icon"/>
          <span class="nav-text">{{ item.title }}</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        style="background: #fff; padding: 0"
        ref="header"
        :title="pageTitle"
        :breadcrumb="{ props: { routes } }"
      >
        <div class="header-con">

          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
          <a-menu class="cus-menu">
            <a-sub-menu>
              <span slot="title" class="submenu-title-wrapper">
                <a-icon type="setting"/>
                操作
              </span>
              <a-menu-item key="setting:2">修改密码</a-menu-item>
              <a-menu-item key="setting:1">退出</a-menu-item>
            </a-sub-menu>
          </a-menu>

        </div>


      </a-layout-header>
      <a-layout-content :style="contentStyle">
        <div :style="containerStyle">
          <nuxt/>
        </div>
      </a-layout-content>
      <!--      <a-layout-footer :style="{ textAlign: 'center' }" ref="footer">
              Ant Design ©2018 Created by Ant UED
            </a-layout-footer>-->
    </a-layout>
  </a-layout>
</template>

<script>
export default {
  name: "manager",
  data() {
    return {
      collapsed: false,
      headerHeight: 0,
      footerHeight: 0,
      routes: [
        {
          path: 'index',
          breadcrumbName: 'First-level Menu',
        },
      ],
      pageTitle: '123',
      menus: [
        {
          link: '/manager/user',
          title: '用户管理',
          icon: 'user',
          key: 'manager-user'
        },
        {
          link: '/manager/role',
          title: '角色管理',
          icon: 'branches',
          key: 'manager-role'
        },
        {
          link: '/manager/menu',
          title: '菜单管理',
          icon: 'link',
          key: 'manager-menu'
        }
      ],
      selectedKeys: []
    }
  },
  watch: {
    '$route': {
      immediate: true,
      handler (to) {
        this.selectedKeys = [to.name]
      }
    },
    selectedKeys ([key]) {
      this.$router.push({ name: key })
    }
  },
  computed: {
    contentStyle() {
      return {
        margin: '24px 16px 24px',
        overflow: 'inherit',
        height: `calc(100vh - ${this.headerHeight + this.footerHeight + 48}px)`,
      }
    },
    containerStyle() {
      return {
        padding: '24px',
        background: '#fff',
        textAlign: 'center',
        height: `100%`,
        overflow: 'auto',
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.header) {
        this.headerHeight = this.$refs.header.$el.offsetHeight
        // this.footerHeight = this.$refs.footer.$el.offsetHeight
      }
    })
  }
}
</script>

<style scoped lang="less">
.cus-menu {
  /deep/ .ant-menu-submenu-arrow {
    display: none;
  }
}
#components-layout-demo-fixed-sider {
  .header-con {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .trigger:hover {
    color: #1890ff;
  }

  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .logo {
    width: 80%;
    padding: 0 10px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px auto 16px;
    line-height: 31px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    overflow: inherit;

    //
  }
}
</style>