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

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

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

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>

src/components/common/CommonPage.vue

@@ -16,8 +16,8 @@
       <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">
+          <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()"
@@ -26,6 +26,8 @@
                 <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">
+    <slot name="footer">
+      <AppCard v-if="showFooter" class="flex-shrink-0 py-12">
         <TheFooter />
       </AppCard>
+    </slot>
   </main>
 </template>
 

src/components/me/modal/index.vue

@@ -26,8 +26,8 @@
 
       <!-- 底部按钮 -->
       <template #footer>
-        <slot v-if="$slots.footer" name="footer" />
-        <footer v-else-if="modalOptions.showFooter" class="flex justify-end">
+        <slot name="footer">
+          <footer v-if="modalOptions.showFooter" class="flex justify-end">
             <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
               {{ modalOptions.cancelText }}
             </n-button>
@@ -41,6 +41,7 @@
               {{ modalOptions.okText }}
             </n-button>
           </footer>
+        </slot>
       </template>
     </n-card>
   </n-modal>