SZYGM1.0/src/layout/Layout.vue

<template>
  <div :class="classObj" class="layout-wrapper">
    <NavBarTop />
    <!--left side-->
    <Sidebar v-if="settings.showLeftMenu" class="sidebar-container" />
    <!--right container-->
    <div class="main-container">
      <Navbar v-if="settings.showTopNavbar" />
      <!-- <TagsView v-if="settings.showTagsView" /> -->
      <AppMain />
    </div>
  </div>
</template>
<!--原理vue2.0-->
<script lang="ts">
/*可以设置默认的名字*/
export default {
  name: 'Layout',
}
</script>

<script setup lang="ts">
import { Sidebar, AppMain, Navbar } from './components'
import NavBarTop from './components/NavBarTop/index.vue'
//import ResizeHook to   listen  page size that   open or close
import ResizeHook from './hook/ResizeHandler'
import { useAppStore } from '@/store/app'
const appStore = useAppStore()
const opened = computed(() => {
  return appStore.sidebar.opened
})

const settings = computed(() => {
  return appStore.settings
})
const classObj = computed(() => {
  return {
    closeSidebar: !opened.value,
    hideSidebar: !settings.value.showLeftMenu,
  }
})
ResizeHook()
</script>

<style lang="scss" scoped>
.main-container {
  min-height: 100%;
  transition: margin-left 0.28s;
  margin-left: var(--side-bar-width);
  position: relative;
  // border-left: 1px solid var(--layout-border-left-color);
}
.sidebar-container {
  transition: width 0.28s;
  width: var(--side-bar-width);
  background-color: var(--el-menu-bg-color);
  height: calc(100% - 48px);
  position: fixed;
  font-size: 0;
  top: 48px;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}
.closeSidebar {
  .sidebar-container {
    width: 54px;
    :deep .menuIcon {
      margin-right: 0 !important;
    }
  }
  .main-container {
    margin-left: 54px;
  }
}
.hideSidebar {
  .sidebar-container {
    width: 0;
  }
  .main-container {
    margin-left: 0;
  }
}
</style>