fix: 🐛 修复 CollapseItem 在微信小程序平台使用 title 插槽时宽度无法撑满的问题

Author: Moonofweisheng

docs/component/collapse.md

@@ -16,14 +16,24 @@ const value = ref<string[]>(['item1'])
   <wd-collapse-item title="标签2" name="item2">这是一条简单的示例文字。</wd-collapse-item>
   <wd-collapse-item name="item3">
     <template #title="{ expanded, disabled, isFirst }">
-      <text style="color: red">通过 slot 自定义标题</text>
-      <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
+      <view class="header">
+        <text style="color: red">通过 slot 自定义标题</text>
+        <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
+      </view>
     </template>
     这是一条简单的示例文字。
   </wd-collapse-item>
 </wd-collapse>
 ```
 
+```css
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+```
+
 ## 手风琴
 
 设置 `accordion` 属性。
@@ -149,7 +159,7 @@ Collapse 查看更多的模式下，可以使用插槽定义自己想要的折
 
 `collapse`可以嵌套使用，同时由于`collapse-item`的内容容器存在默认的`padding`，所以嵌套的`collapse`需要设置`custom-body-style`或者`custom-body-class`来覆盖默认样式。
 
-***以下为示例，也可以自行调整样式。***
+**_以下为示例，也可以自行调整样式。_**
 
 :::tip 注意
 `custom-body-style`和`custom-body-class`在`$LOWEST_VERSION$`及以上版本支持。
@@ -174,6 +184,7 @@ Collapse 查看更多的模式下，可以使用插槽定义自己想要的折
   </wd-collapse>
 </view>
 ```
+
 ```css
 .collapse {
   :deep() {
@@ -280,7 +291,6 @@ collapseRef.value?.toggleAll({
 | custom-body-style | 自定义折叠面板内容容器的样式   | $LOWEST_VERSION$ |
 | custom-body-class | 自定义折叠面板内容容器的样式类 | $LOWEST_VERSION$ |
 
-
 ## Collapse 外部样式类
 
 | 类名                   | 说明                               | 最低版本 |

docs/component/tabs.md

@@ -57,7 +57,7 @@ const tab = ref('例子')
 }
 ```
 
-## 使用徽标<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">1.3.15</el-tag>
+## 使用徽标<el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
 
 使用`bage-props`设置徽标属性，可以参考[Badge 组件的 props](/component/badge#attributes)。
 
@@ -187,7 +187,7 @@ const tab = ref('Design')
 </wd-tabs>
 ```
 
-## 左对齐超出即可滚动 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">1.3.15</el-tag>
+## 左对齐超出即可滚动 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">$LOWEST_VERSION$</el-tag>
 
 `slidable`设置为`always`时，所有的标签会向左侧收缩对齐，超出即可滑动。
 

src/pages/collapse/Index.vue

@@ -29,16 +29,20 @@
         <wd-collapse v-model="value7">
           <wd-collapse-item name="item1">
             <template #title="{ expanded }">
-              <text style="color: red">通过 slot 自定义标题</text>
-              <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
+              <view class="header">
+                <text style="color: red">通过 slot 自定义标题</text>
+                <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
+              </view>
             </template>
             {{ desc7 }}
           </wd-collapse-item>
           <wd-collapse-item name="item2" disabled>
             <template #title="{ expanded, disabled }">
-              <text v-if="disabled">被禁用</text>
-              <text style="color: red" v-else>通过 slot 自定义 title</text>
-              <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
+              <view class="header">
+                <text v-if="disabled">被禁用</text>
+                <text style="color: red" v-else>通过 slot 自定义 title</text>
+                <text>{{ expanded ? '我展开了' : '我已收起' }}</text>
+              </view>
             </template>
             {{ desc7 }}
           </wd-collapse-item>
@@ -199,6 +203,12 @@ function beforeExpend(name: string) {
 </script>
 <style lang="scss" scoped>
 .collapse {
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
   :deep(.more-slot) {
     color: red;
   }

src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss

@@ -43,7 +43,10 @@
     @include when(expanded) {
       @include halfPixelBorder('bottom');
     }
-    
+
+    @include when(custom) {
+      display: block;
+    }
   }
 
   @include e(title) {

src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue

@@ -1,7 +1,9 @@
 <template>
   <view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle">
     <view
-      :class="`wd-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'wd-collapse-item__header-first' : ''}`"
+      :class="`wd-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'wd-collapse-item__header-first' : ''} ${
+        $slots.title ? 'is-custom' : ''
+      }`"
       @click="handleClick"
     >
       <slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">