order-system/src/layout/Menu.vue

@@ -7,7 +7,7 @@
   <!-- 通过当前路由获取路径返回给defalut-active,将默认事件绑定在当前路由路径上 -->
   <el-menu 
     router background-color="#00c6bf"
-    
+    :collapse="collapse"
     :default-active="activeIndex" 
     class="el-menu-vertical-demo"> 
 
@@ -98,6 +98,18 @@
     const { path } = route
     return path
   })
+
+  // 获取store中useCollapseStore传递给collapse属性控制菜单伸缩
+  import { useCollapseStore } from '@/store/collapse'
+
+  // 获取store
+  const store = useCollapseStore()
+
+  // 获取菜单状态
+  const collapse = computed(()=>{
+    return store.getCollapse
+  })
+
 </script>
 
 <style scoped lang="scss">

order-system/src/layout/MenuLogo.vue

@@ -1,17 +1,42 @@
 <template>
   <div class="logo">
     <img :src="MenuLogo">
-    <span class="logo-title">{{ title }}</span>
+    <span v-if="show" class="logo-title">{{ title }}</span>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
+  import { ref,watch } from 'vue'
   const MenuLogo = ref(
     "https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png"
   );
 
+  // 获取store中useCollapseStore传递给collapse属性控制标题显示&隐藏
+  import { useCollapseStore } from '@/store/collapse'
+
+  // 获取store
+  const store = useCollapseStore()
+
+  // 标题元素
   const title = ref('校园点餐系统')
+
+  // 控制标题显示&隐藏
+  const show = ref(true)
+
+  // 通过watch监听
+  watch(
+    ()=> store.getCollapse,
+    (collapsed: boolean) => {
+      if (!collapsed){
+        setTimeout(() =>{
+          show.value = !collapsed
+        },300)
+      }else{
+        show.value = !collapsed
+      }
+    }
+  )
+
 </script>
 
 <style scoped lang="scss">

order-system/src/layout/header/Collapse.vue

@@ -27,12 +27,12 @@
 
   // 获取状态
   const status = computed(()=>{
-    return store.getcollapse
+    return store.getCollapse
   })
 
   // 给图标添加点击事件
   const iconClick = ()=>{
-    
+
     // 通过取反collapse管理图标的状态值
     store.collapse = (!store.collapse)
   }

order-system/src/store/collapse/index.ts

@@ -10,7 +10,7 @@ export const useCollapseStore = defineStore('collapseStore', {
   // getter
   getters:{
     // 数据放在state里面，需要传递state
-    getcollapse(state){
+    getCollapse(state){
       return state.collapse
     }
   },
@@ -18,7 +18,7 @@ export const useCollapseStore = defineStore('collapseStore', {
   // action
   actions:{
     // 设置state里面的数据
-    setcollapse(collapse:boolean){
+    setCollapse(collapse:boolean){
       this.collapse = collapse
     }
   }