fix: 🐛 修复 Tab 未渲染项高度会影响整体高度的问题

Moonofweisheng · Nov 25, 2024 · 5e06378 · 5e06378
1 parent 529e57f
commit 5e06378
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/uni_modules/wot-design-uni/components/wd-tab/index.scss b/src/uni_modules/wot-design-uni/components/wd-tab/index.scss
@@ -6,4 +6,11 @@
   width: 100%;
   flex-shrink: 0;
   box-sizing: border-box;
+
+  @include e(body) {
+    @include m(inactive) {
+      height: 0;
+      transition: height 0.3s ease-in-out;
+    }
+  }
 }
diff --git a/src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue b/src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue
@@ -1,6 +1,6 @@
 <template>
   <view :class="`wd-tab ${customClass}`" :style="customStyle">
-    <view class="wd-tab__body" v-if="shouldBeRender" :style="tabBodyStyle">
+    <view :class="['wd-tab__body', { 'wd-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabBodyStyle">
       <slot />
     </view>
   </view>