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" />
+    <slot name="footer">
-    <TheFooter v-else-if="showFooter" class="mb-12 mt-auto" />
+      <TheFooter v-if="showFooter" class="mb-12 mt-auto" />
+    </slot>
     <n-back-top :bottom="20" />
   </main>
 </template>

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" />
+          <slot name="title-prefix">
-          <template v-else-if="back">
+            <template v-if="back">
-            <div
+              <div
-              class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
+                class="mr-16 flex cursor-pointer items-center text-16 opacity-60 transition-all-300 hover:opacity-40"
-              @click="router.back()"
+                @click="router.back()"
-            >
+              >
-              <i class="i-material-symbols:arrow-left-alt" />
+                <i class="i-material-symbols:arrow-left-alt" />
-              <span class="ml-4">返回</span>
+                <span class="ml-4">返回</span>
-            </div>
+              </div>
-          </template>
+            </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" />
+    <slot name="footer">
-    <AppCard v-else-if="showFooter" class="flex-shrink-0 py-12">
+      <AppCard v-if="showFooter" class="flex-shrink-0 py-12">
-      <TheFooter />
+        <TheFooter />
-    </AppCard>
+      </AppCard>
+    </slot>
   </main>
 </template>
 

src/components/me/modal/index.vue

@@ -26,21 +26,22 @@
 
       <!-- 底部按钮 -->
       <template #footer>
-        <slot v-if="$slots.footer" name="footer" />
+        <slot name="footer">
-        <footer v-else-if="modalOptions.showFooter" class="flex justify-end">
+          <footer v-if="modalOptions.showFooter" class="flex justify-end">
-          <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
+            <n-button v-if="modalOptions.showCancel" @click="handleCancel()">
-            {{ modalOptions.cancelText }}
+              {{ modalOptions.cancelText }}
-          </n-button>
+            </n-button>
-          <n-button
+            <n-button
-            v-if="modalOptions.showOk"
+              v-if="modalOptions.showOk"
-            type="primary"
+              type="primary"
-            :loading="modalOptions.okLoading"
+              :loading="modalOptions.okLoading"
-            class="ml-20"
+              class="ml-20"
-            @click="handleOk()"
+              @click="handleOk()"
-          >
+            >
-            {{ modalOptions.okText }}
+              {{ modalOptions.okText }}
-          </n-button>
+            </n-button>
-        </footer>
+          </footer>
+        </slot>
       </template>
     </n-card>
   </n-modal>