FE_sandTable/src/layout/index.vue

<template>
  <div class="expand body min-h-full bg-gray-100">
    <!--遮罩层。当手机模式且左边栏打开时，显示遮罩层-->
    <div v-if="showMask"
         class="h-full mt-1 w-full absolute z-30 bg-black opacity-30 md:hidden"
         @click="closeSidebar" />
    <app-header />
    <app-sidebar v-if="!hideNav"
                 class="sidebar fixed h-full px-5 overflow-hidden transition-width duration-300 z-40" />
    <div class="main h-[calc(100vh-85px)] transition-margin duration-300 overflow-auto"
         :class="{ 'md:ml-sidebar': !hideNav }">
      <app-main />
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { appState, closeSidebar } from '@/store/useAppState';
import Setting from '@/settings';
import { AppSidebar, AppHeader, AppMain } from './components';
import useResizeHandler from './composables/useResizeHandler';

export default defineComponent({
  name: 'Layout',
  components: { AppSidebar, AppHeader, AppMain },
  setup() {
    const route = useRoute();
    const hideNav = ref<boolean>(false);
    watch(
      () => route.path,
      (val: any) => {
        hideNav.value = Setting.hideNavPath.includes(val);
      },
      {
        immediate: true,
      },
    );

    useResizeHandler();
    return {
      closeSidebar,
      showMask: computed(() => appState.sidebar),
      classObj: computed(() => ({
        expand: appState.sidebar,
        collapse: !appState.sidebar,
      })),
      hideNav,
    };
  },
});
</script>

<style lang="scss" scoped>
.expand .sidebar {
  @apply w-sidebar;
}
.expand .main {
  // @apply ml-0 md:ml-sidebar;
}
.collapse .sidebar {
  @apply w-0 md:w-sidebar-collapse;
}
.collapse .main {
  @apply ml-0 md:ml-sidebar-collapse;
}
.body {
  background: url(../assets/images/1.png) 0 0/100% auto no-repeat;
}
</style>