伸缩布局方案

创建文件

store/sidebaropen.js

import { ref, computed } from "vue";
import { defineStore } from "pinia";

export const useCollapse = defineStore("collapse", () => {
  const sidebarOpened = ref(false);
  const toggleSidebar = () => {
    sidebarOpened.value = !sidebarOpened.value;
  };
  return { toggleSidebar, sidebarOpened };
});

创建组件

• components/SideBarOpen.vue

<template>
  <div class="SideBarOpen">
    <div v-if="!useCollapse().sidebarOpened" @click="toggleSidebar">
      <SvgIcon icon="hamburger-opened" size="24" color="black"></SvgIcon>
    </div>
    <div v-if="useCollapse().sidebarOpened" @click="toggleSidebar">
      <SvgIcon icon="hamburger-closed" size="24" color="black"></SvgIcon>
    </div>
  </div>
</template>

<script setup>
import { useCollapse } from "@/stores/sidebaropen";
const { sidebarOpened, toggleSidebar } = useCollapse();
</script>

<style lang="scss" scoped>
.SideBarOpen {
  width: 24px;
  height: 24px;
  float: left;
  cursor: pointer;
}
</style>

NavBar 组件引入

<template>
  <div class="navbarContent">
    <div class="sidebaropen">
      <SideBarOpen></SideBarOpen>
    </div>
    <div class="avatar">
      <Avater></Avater>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.navbarContent {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #ccc;
  .sidebaropen {
    float: left;
    margin-top: 15px;
    margin-left: 20px;
    cursor: pointer;
  }
  .avatar {
    width: 80px;
    height: 50px;
    float: right;
    margin-right: 20px;
    margin-top: 5px;
  }
}
</style>

修改 layout 布局

• 改变宽度

<template>
  <div class="app-wrapper">
    <!--左侧-->
    <SideBar id="guide-sidebar" class="sidebarleft"></SideBar>
    <!--左侧-->
    <!--右侧-->
    <div class="main-containerall">
      <div class="fixed-header">
        <!--顶部的navbar-->
        <NavBar></NavBar>
        <!--tags-->

        <!--tags-->
      </div>
      <!--内容区域-->
      <div class="content">
        <AppMain></AppMain>
      </div>
      <!--内容区域-->
    </div>
    <!--右侧-->
  </div>
</template>

<script setup>
import { useCollapse } from "@/stores/sidebaropen";

const sidebarwidth = computed(() => {
  return useCollapse().sidebarOpened ? "64px" : "210px";
});
</script>

<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-flow: row nowrap;
  .sidebarleft {
    flex: 0 0 v-bind(sidebarwidth);
    min-height: 100vh;
    background: #{$menuBg};
  }
  .main-containerall {
    flex: 1;
    display: flex;
    min-height: 100vh;
    flex-flow: column nowrap;
    .fixed-header {
      position: sticky;
      top: 0px;
      z-index: 10;
      flex: 0 0 105px;
      width: 100%;
      border-bottom: 1px solid #d8dce5;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    }
    .content {
      flex: 1;
      width: 100%;
    }
  }
}
</style>