fix(Empty): 支持自定义图片和描述插槽 (#825)

components/empty/empty.vue

@@ -1,21 +1,19 @@
 <template>
     <div :class="prefixCls">
         <div :class="`${prefixCls}-image`" :style="imageStyle">
+            <slot v-if="$slots.image" name="image" />
             <img
-                v-if="imageSrc"
+                v-else-if="imageSrc"
                 class="empty-img"
                 :src="imageSrc"
                 ondragstart="return false"
             >
-            <slot v-else name="image">
-                <DefaultImgEmpty />
-            </slot>
+            <DefaultImgEmpty v-else />
         </div>
         <div :class="`${prefixCls}-description`">
-            <p v-if="description" class="empty-text">{{ description }}</p>
-            <slot v-else name="description">
-                <p class="empty-text">{{ defaultDescription }}</p>
-            </slot>
+            <slot v-if="$slots.description" name="description" />
+            <p v-else-if="description">{{ description }}</p>
+            <p v-else>{{ defaultDescription }}</p>
         </div>
         <div v-if="$slots.default" :class="`${prefixCls}-bottom`">
             <slot />

components/empty/style/empty.less

@@ -46,12 +46,8 @@
 
     &-description {
         margin-top: var(--f-empty-description-margin-top);
-
-        .empty-text {
-            margin: 0;
-            color: var(--f-empty-text-color);
-            font-size: var(--f-empty-font-size);
-        }
+        color: var(--f-empty-text-color);
+        font-size: var(--f-empty-font-size);
     }
 
     &-bottom {

docs/.vitepress/components/empty/bottom.vue

@@ -1,11 +1,11 @@
 <template>
-    <FEmpty :image-src="url" image-style="width: 400px;" description="暂无数据">
+    <FEmpty>
+        <template #description>
+            <span>自定义插槽内容</span>
+        </template>
         <FButton type="primary">退出登录</FButton>
     </FEmpty>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-const url = ref('/images/empty.svg');
 </script>

docs/.vitepress/components/empty/custom.vue → docs/.vitepress/components/empty/customImageAttr.vue

@@ -1,5 +1,5 @@
 <template>
-    <FEmpty :image-src="url" description="自定义图片" />
+    <FEmpty :image-src="url" :image-style="{ width: '300px' }" description="自定义图片(属性)" />
 </template>
 
 <script lang="ts" setup>

docs/.vitepress/components/empty/customImageSlot.vue

@@ -0,0 +1,13 @@
+<template>
+    <FEmpty image-style="width: 200px;" description="自定义图片(插槽)">
+        <template #image>
+            <img :src="url" alt="empty">
+        </template>
+    </FEmpty>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const url = ref('/images/empty.svg');
+</script>

docs/.vitepress/components/empty/index.md

@@ -14,45 +14,49 @@ app.use(FEmpty);
 
 ### 基础用法
 
-默认展示
+:::demo
+default.vue
+:::
 
---Default
+### 自定义图片(属性)
 
-### 自定义图片
+通过属性自定义图片。
 
-通过设置 image 属性传入图片 URL。
+:::demo
+customImageAttr.vue
+:::
 
---Custom
+### 自定义图片(插槽)
 
-### 自定义图片大小
+通过插槽自定义图片。
 
-通过设置 image-size 属性来自定义图片大小
-
---Size
+:::demo
+customImageSlot.vue
+:::
 
 ### 下拉选项场景
 
-在其他组件中的应用
+在其他组件中的应用。
 
---Select
+:::demo
+select.vue
+:::
 
 ### 自定义底部内容
 
-自定义底部插槽内容
-
---Bottom
-
---CODE
+:::demo
+bottom.vue
+:::
 
 ## API
 
 ### 属性 Attributes
 
 | 属性名      | 描述                                  | 类型            | 默认值 |
 | ----------- | ------------------------------------- | --------------- | ------ |
-| imageSrc   | empty 组件的图像地址，优先级大于 solt | `string`        | -      |
-| imageStyle | empty 组件的图像自定义样式            | `CSSProperties` | -      |
-| description | empty 组件的描述信息，优先级大于 solt | `string`        | -      |
+| imageSrc    | 图像地址，优先级小于 solt | `string`        | -      |
+| imageStyle  | 图像自定义样式            | `CSSProperties` | -      |
+| description | 描述信息，优先级小于 solt | `string`        | -      |
 
 ### 插槽 Slots
 

docs/.vitepress/components/empty/select.vue

@@ -1,7 +1,7 @@
 <template>
     <FSelect>
         <template #empty>
-            <FEmpty image-style="width: 80px;" description="暂无数据" />
+            <FEmpty image-style="width: 80px;" description="暂无内容" />
         </template>
     </FSelect>
 </template>