From 6af6eb3c9901e45c004549c5673ab722c46588cf Mon Sep 17 00:00:00 2001
From: leip247 <leipu95@gmail.com>
Date: Wed, 13 Nov 2024 11:05:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(slot):=20=E4=BC=98=E5=8C=96=E9=83=A8?=
 =?UTF-8?q?=E5=88=86slot=E5=86=99=E6=B3=95,=E5=87=8F=E5=B0=91=E6=89=8B?=
 =?UTF-8?q?=E5=8A=A8=E5=88=A4=E6=96=AD=20(#101)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(slot): 优化部分slot写法,减少手动判断

* fix(slot): 优化部分slot写法,减少手动判断
---
 src/components/common/AppPage.vue    |  5 +++--
 src/components/common/CommonPage.vue | 31 +++++++++++++++-------------
 src/components/me/modal/index.vue    | 31 ++++++++++++++--------------
 3 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/src/components/common/AppPage.vue b/src/components/common/AppPage.vue
index 10b959a..a60386e 100644
--- a/src/components/common/AppPage.vue
+++ b/src/components/common/AppPage.vue
@@ -11,8 +11,9 @@
     <main :class="{ 'flex-1': full }" class="m-12">
       <slot />
     </main>
-    <slot v-if="$slots.footer" name="footer" />
-    <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+    <slot name="footer">
+      <TheFooter v-if="showFooter" class="mb-12 mt-auto" />
+    </slot>
     <n-back-top :bottom="20" />
   </main>
 </template>
diff --git a/src/components/common/CommonPage.vue b/src/components/common/CommonPage.vue
index 1099a8d..2ef8aa4 100644
--- a/src/components/common/CommonPage.vue
+++ b/src/components/common/CommonPage.vue
@@ -16,16 +16,18 @@
       <slot v-if="$slots.header" name="header" />
       <template v-else>
         <div class="flex items-center">
-          <slot v-if="$slots['title-prefix']" name="title-prefix" />
-          <template v-else-if="back">
-            <div
-              class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
-              @click="router.back()"
-            >
-              <i class="i-material-symbols:arrow-left-alt" />
-              <span class="ml-4">返回</span>
-            </div>
-          </template>
+          <slot name="title-prefix">
+            <template v-if="back">
+              <div
+                class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
+                @click="router.back()"
+              >
+                <i class="i-material-symbols:arrow-left-alt" />
+                <span class="ml-4">返回</span>
+              </div>
+            </template>
+          </slot>
+
           <div class="mr-12 h-16 w-4 rounded-l-2 bg-primary" />
           <h2 class="font-normal">
             {{ title ?? route.meta?.title }}
@@ -39,10 +41,11 @@
       <slot />
     </AppCard>
 
-    <slot v-if="$slots.footer" name="footer" />
-    <AppCard v-else-if="showFooter" class="flex-shrink-0 py-12">
-      <TheFooter />
-    </AppCard>
+    <slot name="footer">
+      <AppCard v-if="showFooter" class="flex-shrink-0 py-12">
+        <TheFooter />
+      </AppCard>
+    </slot>
   </main>
 </template>
 
diff --git a/src/components/me/modal/index.vue b/src/components/me/modal/index.vue
index 52b0d4d..b56bd99 100644
--- a/src/components/me/modal/index.vue
+++ b/src/components/me/modal/index.vue
@@ -26,21 +26,22 @@
 
       <!-- 底部按钮 -->
       <template #footer>
-        <slot v-if="$slots.footer" name="footer" />
-        <footer v-else-if="modalOptions.showFooter" class="flex justify-end">
-          <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
-            {{ modalOptions.cancelText }}
-          </n-button>
-          <n-button
-            v-if="modalOptions.showOk"
-            type="primary"
-            :loading="modalOptions.okLoading"
-            class="ml-20"
-            @click="handleOk()"
-          >
-            {{ modalOptions.okText }}
-          </n-button>
-        </footer>
+        <slot name="footer">
+          <footer v-if="modalOptions.showFooter" class="flex justify-end">
+            <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
+              {{ modalOptions.cancelText }}
+            </n-button>
+            <n-button
+              v-if="modalOptions.showOk"
+              type="primary"
+              :loading="modalOptions.okLoading"
+              class="ml-20"
+              @click="handleOk()"
+            >
+              {{ modalOptions.okText }}
+            </n-button>
+          </footer>
+        </slot>
       </template>
     </n-card>
   </n-modal>