antdesign——layout

bug1

• 当组件内容很长时：控制左侧菜单不可上下滚动
• 当组件内容很长时：右侧正常上下滚动，且footer在最下边
• 当组件内容很短时：内容部分撑开页面布满全屏
  

//BasicLayout
<style lang="less" scoped>
/deep/.ant-layout {
  height: 100vh;
}
/deep/.ant-layout-content {
  min-height: auto !important;
}
</style>

bug2：菜单点击收缩

//BasicLayout加上v-model
<a-layout-sider v-model="collapsed">
   <SiderMenu />
</a-layout-sider>

代码

BasicLayout

<template>
  <div>
    <a-layout>
      <a-layout-sider v-model="collapsed">
        <SiderMenu />
      </a-layout-sider>
      <a-layout>
        <a-layout-header><Header /></a-layout-header>
        <a-layout-content><router-view></router-view></a-layout-content>
        <a-layout-footer><Footer /></a-layout-footer>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";
import SiderMenu from "./SiderMenu";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["collapsed"]),
  },
  components: {
    Header,
    Footer,
    SiderMenu,
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
/deep/.ant-layout {
  height: 100vh;
}
/deep/.ant-layout-content {
  min-height: auto !important;
}
</style>

SiderMenu

<template>
  <div>
    <div>
      <a-button type="primary" style="margin-bottom: 16px"> LOGO </a-button>
      <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['sub1']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
      >
        <a-menu-item key="1">
          <a-icon type="pie-chart" />
          <span>Option 1</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="desktop" />
          <span>Option 2</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="inbox" />
          <span>Option 3</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <span slot="title"
            ><a-icon type="mail" /><span>Navigation One</span></span
          >
          <a-menu-item key="5"> Option 5 </a-menu-item>
          <a-menu-item key="6"> Option 6 </a-menu-item>
          <a-menu-item key="7"> Option 7 </a-menu-item>
          <a-menu-item key="8"> Option 8 </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <span slot="title"
            ><a-icon type="appstore" /><span>Navigation Two</span></span
          >
          <a-menu-item key="9"> Option 9 </a-menu-item>
          <a-menu-item key="10"> Option 10 </a-menu-item>
          <a-sub-menu key="sub3" title="Submenu">
            <a-menu-item key="11"> Option 11 </a-menu-item>
            <a-menu-item key="12"> Option 12 </a-menu-item>
          </a-sub-menu>
        </a-sub-menu>
      </a-menu>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["collapsed"]),
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped></style>

Header

<template>
  <div>
    <a-button
      type="primary"
      style="margin-bottom: 16px"
      @click="changeCollapsed"
    >
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["collapsed"]),
  },
  mounted() {},
  methods: {
    changeCollapsed() {
      this.$store.commit("setCollapsed", !this.collapsed);
    },
  },
};
</script>
<style lang="less" scoped>
.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
  color: #fff;
}

.trigger:hover {
  color: #1890ff;
}
</style>

footer

<template>
  <div>footer</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped></style>