fix: 🐛 修复Card footer或者header没写的时候，不会自动隐藏占位(Moonofweisheng#822)

810505339 · Jan 10, 2025 · b9f25b4 · b9f25b4
1 parent 834cd8e
commit b9f25b4
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 4 deletions.
diff --git a/src/pages/card/Index.vue b/src/pages/card/Index.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-13 11:47:12
- * @LastEditTime: 2023-08-11 18:49:11
- * @LastEditors: weisheng
+ * @LastEditTime: 2025-01-10 14:52:40
+ * @LastEditors: 810505339
  * @Description: 
  * @FilePath: \wot-design-uni\src\pages\card\Index.vue
  * 记得注释
@@ -36,6 +36,49 @@
           </template>
         </wd-card>
       </demo-block>
+      <demo-block title="去除footer" transparent>
+        <wd-card title="网名" type="rectangle">
+          <view>
+            <image
+              src="https://avatars.githubusercontent.com/u/26426873?v=4"
+              alt="joy"
+              style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
+            />
+            大家好,我叫摸鱼
+          </view>
+        </wd-card>
+        <wd-card type="rectangle">
+          <template #title>
+            <view class="title">
+              <view>2020-02-03服务到期</view>
+              <view class="title-tip">
+                <wd-icon name="warning" size="14px" custom-style="vertical-align: bottom" />
+                您可以去电脑上使用该服务
+              </view>
+            </view>
+          </template>
+
+          <view style="height: 40px" class="content">
+            <image
+              src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
+              width="40"
+              height="40"
+              alt="joy"
+              style="width: 40px; height: 40px; border-radius: 4px; margin-right: 12px"
+            />
+            <view>
+              <view class="custom-main">智云好客CRM短信_催评营销</view>
+              <view class="custom-sub">高级版-快速吸粉 | 周期一年</view>
+            </view>
+          </view>
+          <template #footer>
+            <view>
+              <wd-button size="small" plain custom-style="margin-right: 8px">评价</wd-button>
+              <wd-button size="small">立即使用</wd-button>
+            </view>
+          </template>
+        </wd-card>
+      </demo-block>
       <demo-block title="矩形卡片" transparent>
         <wd-card title="2020-02-03服务到期" type="rectangle">
           <view style="height: 40px" class="content">
@@ -103,6 +146,7 @@
   .custom-main {
     color: $-dark-color;
   }
+
   .custom-sub {
     color: $-dark-color-gray;
   }
@@ -115,12 +159,15 @@
   justify-content: flex-start;
   align-items: center;
 }
+
 .content {
   justify-content: flex-start;
 }
+
 .title {
   justify-content: space-between;
 }
+
 .title-tip {
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
@@ -130,6 +177,7 @@
   color: rgba(0, 0, 0, 0.85);
   font-size: 16px;
 }
+
 .custom-sub {
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;

diff --git a/src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue b/src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]" :style="customStyle">
-    <view :class="['wd-card__title-content', customTitleClass]">
+    <view :class="['wd-card__title-content', customTitleClass]" v-if="title || $slots.title">
       <view class="wd-card__title">
         <text v-if="title">{{ title }}</text>
         <slot v-else name="title"></slot>
@@ -9,7 +9,7 @@
     <view :class="`wd-card__content ${customContentClass}`">
       <slot></slot>
     </view>
-    <view :class="`wd-card__footer ${customFooterClass}`">
+    <view :class="`wd-card__footer ${customFooterClass}`" v-if="$slots.footer">
       <slot name="footer"></slot>
     </view>
   </view>