iot-front-ui/src/views/HomeView.vue

<template>
  <div class="home">
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <HomeHeader :leftVisible.sync="leftVisible" :is-login="true" />
      </a-layout-header>
      <a-layout class="main_body">
        <a-drawer
          v-if="leftVisible"
          placement="left"
          :visible="leftVisible"
          :get-container="false"
          :closable="false"
          @close="closeLeft"
          width="auto"
          :wrap-style="{ position: 'absolute' }"
        >
          <HomeLeft
            :close="
              () => {
                leftVisible = false;
              }
            "
          />
        </a-drawer>
        <a-layout-sider
          v-model="collapse"
          :trigger="null"
          :width="asideWidth"
          style="background: #fff"
          :collapsible="true"
          :collapsed-width="collapsedWidth"
        >
          <HomeAside :collapse.sync="collapse" />
        </a-layout-sider>
        <!-- 内容 -->
        <a-layout-content class="home-page">
          <Transition name="fade-transform" mode="out-in">
            <router-view
              :key="
                $route.matched[1]
                  ? $route.matched[1].name
                    ? $route.matched[1].name
                    : -1
                  : -1
              "
            />
          </Transition>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import "@/style/common.css";
import HomeHeader from "@/components/home/HomeHeader.vue";
import HomeAside from "@/components/home/HomeAside.vue";
import HomeLeft from "@/components/home/HomeLeft.vue";

export default {
  name: "HomeView",
  components: {
    HomeHeader,
    HomeAside,
    HomeLeft,
  },
  data() {
    return {
      collapse: true, // 侧边栏是否收起
      leftVisible: false,
      asideWidth: 160,
      collapsedWidth: 60,
      contentWidth: "84%",
      contentHeight: 450,
    };
  },
  watch: {
    $route() {
      this.judgeHideAside();
    },
  },

  mounted() {
    this.judgeHideAside();
    if (this.$route.matched.length === 1) {
      this.$router.push({ path: "/dashboard" });
    }
  },
  methods: {
    closeLeft() {
      this.leftVisible = false;
    },
    judgeHideAside() {
      let name = this.$route.name;
      if (!name) {
        this.asideWidth = 160;
        this.collapsedWidth = 60;
        return;
      }
      if (["dashboard", "notice"].indexOf(name) > -1) {
        this.asideWidth = 0;
        this.collapsedWidth = 0;
      } else if (this.asideWidth === 0) {
        this.asideWidth = 160;
        this.collapsedWidth = 60;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;

  /deep/ .ant-drawer-body {
    padding: 0;
    height: 100%;
  }

  .header {
    height: 60px;
    padding: 0;
    line-height: 60px;
  }
  .main_body {
    height: calc(100vh - 60px);
    position: relative;
  }

  .home-page {
    display: inline-block;
    background: #f0f1f2;
    margin: 0;
    transition: all 1s;
    overflow: hidden;
  }
}
/deep/ .ant-drawer-content {
  background: rgba(255, 255, 255, 0.85);
}
</style>