From c03731ff3207b08728741856f594d864dee5fd6a Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 10 Aug 2025 22:22:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8MenuLogo.vue=E4=B8=AD=E8=A7=A3?=
 =?UTF-8?q?=E5=86=B3=E5=BD=93=E8=8F=9C=E5=8D=95=E6=A0=8F=E6=94=B6=E7=BC=A9?=
 =?UTF-8?q?=E6=97=B6=EF=BC=8C=E6=A0=87=E9=A2=98=E6=96=87=E5=AD=97=E4=B8=8D?=
 =?UTF-8?q?=E6=94=B6=E7=BC=A9=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加show变量，通过布尔值控制文字显示
通过watch监听show变量值的变化，实现延时函数，美化标题收缩效果
---
 order-system/src/layout/Menu.vue            |  2 +-
 order-system/src/layout/MenuLogo.vue        | 29 +++++++++++++++++++--
 order-system/src/layout/header/Collapse.vue |  4 +--
 order-system/src/store/collapse/index.ts    |  4 +--
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/order-system/src/layout/Menu.vue b/order-system/src/layout/Menu.vue
index bb3dd38..eb3e037 100644
--- a/order-system/src/layout/Menu.vue
+++ b/order-system/src/layout/Menu.vue
@@ -107,7 +107,7 @@
 
   // 获取菜单状态
   const collapse = computed(()=>{
-    return store.getcollapse
+    return store.getCollapse
   })
 
 </script>
diff --git a/order-system/src/layout/MenuLogo.vue b/order-system/src/layout/MenuLogo.vue
index e6e5cac..2fcadd2 100644
--- a/order-system/src/layout/MenuLogo.vue
+++ b/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">
diff --git a/order-system/src/layout/header/Collapse.vue b/order-system/src/layout/header/Collapse.vue
index d853a9b..961f4c5 100644
--- a/order-system/src/layout/header/Collapse.vue
+++ b/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)
   }
diff --git a/order-system/src/store/collapse/index.ts b/order-system/src/store/collapse/index.ts
index 955b810..08850a5 100644
--- a/order-system/src/store/collapse/index.ts
+++ b/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
     }
   }