feat: 更新 Bubble 和 BubbleList 组件以支持插槽内容的更灵活引用

Author: worryzyy

packages/element-x-ui/src/components/Bubble/main.vue

@@ -179,27 +179,27 @@ export default {
       0 1px 6px -1px rgba(0, 0, 0, 0.02),
       0 2px 4px 0 rgba(0, 0, 0, 0.02)`,
       '--bubble-content-max-width': `${maxWidth}`,
-      '--el-x-bubble-avatar-placeholder-width': `${$scopedSlots.avatar ? '' : avatarSize}`,
-      '--el-x-bubble-avatar-placeholder-height': `${$scopedSlots.avatar ? '' : avatarSize}`,
+      '--el-x-bubble-avatar-placeholder-width': `${$scopedSlots.avatar || $slots.avatar ? '' : avatarSize}`,
+      '--el-x-bubble-avatar-placeholder-height': `${$scopedSlots.avatar || $slots.avatar ? '' : avatarSize}`,
       '--el-x-bubble-avatar-placeholder-gap': `${avatarGap}`,
     }"
     >
         <!-- 头像 -->
-        <div v-if="!$scopedSlots.avatar && avatar" class="el-x-bubble-avatar el-x-bubble-avatar-size">
+        <div v-if="!($scopedSlots.avatar || $slots.avatar) && avatar" class="el-x-bubble-avatar el-x-bubble-avatar-size">
             <el-avatar :size="0" :src="avatar" :shape="avatarShape" :icon="avatarIcon" :src-set="avatarSrcSet" :alt="avatarFit" @error="avatarError" />
         </div>
 
         <!-- 头像属性进行占位 -->
-        <div v-if="!$scopedSlots.avatar && !avatar && avatarSize" class="el-x-bubble-avatar-placeholder" />
+        <div v-if="!($scopedSlots.avatar || $slots.avatar) && !avatar && avatarSize" class="el-x-bubble-avatar-placeholder" />
 
-        <div v-if="$scopedSlots.avatar" class="el-x-bubble-avatar">
+        <div v-if="$scopedSlots.avatar || $slots.avatar" class="el-x-bubble-avatar">
             <slot name="avatar" />
         </div>
 
         <!-- 内容 -->
         <div class="el-x-bubble-content-wrapper">
             <!-- 头部内容 -->
-            <div v-if="$scopedSlots.header" class="el-x-bubble-header">
+            <div v-if="$scopedSlots.header || $slots.header" class="el-x-bubble-header">
                 <slot name="header" />
             </div>
 
@@ -219,7 +219,7 @@ export default {
             'no-content': !content,
           }">
                     <Typewriter
-                        v-if="!$scopedSlots.content && content"
+                        v-if="!($scopedSlots.content || $slots.content) && content"
                         ref="typewriterRef"
                         :typing="_typing"
                         :content="content"
@@ -232,20 +232,20 @@ export default {
                 </div>
 
                 <!-- 内容-自定义 -->
-                <slot v-if="!internalDestroyed && $scopedSlots.content && !loading" name="content" />
+                <slot v-if="!internalDestroyed && ($scopedSlots.content || $slots.content) && !loading" name="content" />
 
                 <!-- 加载中-默认 -->
-                <div v-if="loading && !$scopedSlots.loading" class="el-x-bubble-loading-wrap">
+                <div v-if="loading && !($scopedSlots.loading || $slots.loading)" class="el-x-bubble-loading-wrap">
                     <div v-for="(_, index) in dots" :key="index" class="dot" :style="{ animationDelay: `${index * 0.2}s` }" />
                 </div>
 
                 <!-- 加载中-自定义 -->
-                <div v-if="loading && $scopedSlots.loading" class="el-x-bubble-loading-wrap">
+                <div v-if="loading && ($scopedSlots.loading || $slots.loading)" class="el-x-bubble-loading-wrap">
                     <slot name="loading" />
                 </div>
             </div>
 
-            <div v-if="$scopedSlots.footer" class="el-x-bubble-footer">
+            <div v-if="$scopedSlots.footer || $slots.footer" class="el-x-bubble-footer">
                 <slot name="footer" />
             </div>
         </div>

packages/element-x-ui/src/components/BubbleList/main.vue

@@ -32,19 +32,23 @@
             :no-style="item.noStyle"
             @finish="(instance) => handleBubbleComplete(index, instance)"
         >
-            <template v-if="$scopedSlots.avatar" slot="avatar">
-                <slot name="avatar" :item="item" />
+            <template slot="avatar">
+                <slot name="avatar" :item="item">
+                    <template v-if="item.avatar">
+                        <el-avatar :size="item.avatarSize || ''" :src="item.avatar" :shape="item.avatarShape || 'circle'" :icon="item.avatarIcon" :src-set="item.avatarSrcSet" :alt="item.avatarAlt" :fit="item.avatarFit || 'cover'" />
+                    </template>
+                </slot>
             </template>
-            <template v-if="$scopedSlots.header" slot="header">
+            <template v-if="$scopedSlots.header || $slots.header" slot="header">
                 <slot name="header" :item="item" />
             </template>
-            <template v-if="$scopedSlots.content" slot="content">
+            <template v-if="$scopedSlots.content || $slots.content" slot="content">
                 <slot name="content" :item="item" />
             </template>
-            <template v-if="$scopedSlots.footer" slot="footer">
+            <template v-if="$scopedSlots.footer || $slots.footer" slot="footer">
                 <slot name="footer" :item="item" />
             </template>
-            <template v-if="$scopedSlots.loading" slot="loading">
+            <template v-if="$scopedSlots.loading || $slots.loading" slot="loading">
                 <slot name="loading" :item="item" />
             </template>
         </Bubble>
@@ -53,7 +57,7 @@
             v-if="showBackToBottom && hasVertical"
             class="el-x-bubble-list-default-back-button"
             :class="{
-        'el-x-bubble-list-back-to-bottom-solt': $scopedSlots.backToBottom,
+        'el-x-bubble-list-back-to-bottom-solt': $scopedSlots.backToBottom || $slots.backToBottom,
       }"
             :style="{
         bottom: backButtonPosition.bottom,