feat(Empty): support set the image size separately (#10465)

* feat(Empty): support set the image size separately

* docs: fix type

* docs: fix

packages/vant/src/empty/Empty.tsx

@@ -1,6 +1,6 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
+import { defineComponent, PropType, type ExtractPropTypes } from 'vue';
 import {
-  numericProp,
+  Numeric,
   getSizeStyle,
   makeStringProp,
   createNamespace,
@@ -13,7 +13,7 @@ const PRESET_IMAGES = ['error', 'search', 'default'];
 
 const emptyProps = {
   image: makeStringProp('default'),
-  imageSize: numericProp,
+  imageSize: [Number, String, Array] as PropType<Numeric | [Numeric, Numeric]>,
   description: String,
 };
 

packages/vant/src/empty/README.md

@@ -37,20 +37,31 @@ Use the image prop to display different placeholder images.
 <van-empty image="search" description="Description" />
 ```
 
+### Custom Size
+
+Using `image-size` prop to custom the size of image.
+
+```html
+<!-- The default unit is px -->
+<van-empty image-size="100" description="Description" />
+<!-- Support other units, such as rem, vh, vw -->
+<van-empty image-size="10rem" description="Description" />
+```
+
+You can set the width and height separately.
+
+```html
+<van-empty :image-size="[60, 40]" description="Description" />
+```
+
 ### Custom Image
 
 ```html
 <van-empty
-  class="custom-image"
   image="https://cdn.jsdelivr.net/npm/@vant/assets/leaf.jpeg"
+  image-size="80"
   description="Description"
 />
-
-<style>
-  .custom-image img {
-    border-radius: 100%;
-  }
-</style>
 ```
 
 ### Bottom Content
@@ -75,7 +86,7 @@ Use the image prop to display different placeholder images.
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | image | Image type，can be set to `error` `network` `search` or image URL | _string_ | `default` |
-| image-size | Image size | _number \| string_ | - |
+| image-size | Image size | _number \| string \| Array_ | - |
 | description | Description | _string_ | - |
 
 ### Slots

packages/vant/src/empty/README.zh-CN.md

@@ -37,23 +37,33 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
 <van-empty image="search" description="描述文字" />
 ```
 
+### 自定义大小
+
+通过 `image-size` 属性图片的大小。
+
+```html
+<!-- 不指定单位，默认为 px -->
+<van-empty image-size="100" description="描述文字" />
+<!-- 指定单位，支持 rem, vh, vw -->
+<van-empty image-size="10rem" description="描述文字" />
+```
+
+将 `image-size` 设置为数组格式，可以分别设置宽高。数组第一项对应宽度，数组第二项对应高度。
+
+```html
+<van-empty :image-size="[60, 40]" description="描述文字" />
+```
+
 ### 自定义图片
 
 需要自定义图片时，可以在 image 属性中传入任意图片 URL。
 
 ```html
 <van-empty
-  class="custom-image"
   image="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
+  image-size="80"
   description="描述文字"
 />
-
-<style>
-  .custom-image .van-empty__image {
-    width: 90px;
-    height: 90px;
-  }
-</style>
 ```
 
 ### 底部内容
@@ -80,7 +90,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
-| image-size | 图片大小，默认单位为 `px` | _number \| string_ | - |
+| image-size | 图片大小，默认单位为 `px` | _number \| string \| Array_ | - |
 | description | 图片下方的描述文字 | _string_ | - |
 
 ### Slots

packages/vant/src/empty/demo/index.vue

@@ -12,6 +12,7 @@ const t = useTranslate({
     search: '搜索提示',
     network: '网络错误',
     imageType: '图片类型',
+    customSize: '自定义大小',
     description: '描述文字',
     customImage: '自定义图片',
     bottomContent: '底部内容',
@@ -21,6 +22,7 @@ const t = useTranslate({
     search: 'Search',
     network: 'Network',
     imageType: 'Image Type',
+    customSize: 'Custom Size',
     description: 'Description',
     customImage: 'Custom Image',
     bottomContent: 'Bottom Content',
@@ -49,10 +51,14 @@ const active = ref('error');
     </van-tabs>
   </demo-block>
 
+  <demo-block :title="t('customSize')">
+    <van-empty image-size="100" :description="t('description')" />
+  </demo-block>
+
   <demo-block :title="t('customImage')">
     <van-empty
-      class="custom-image"
       :image="cdnURL('custom-empty-image.png')"
+      :image-size="80"
       :description="t('description')"
     />
   </demo-block>
@@ -70,13 +76,6 @@ const active = ref('error');
 .demo-empty {
   background: var(--van-background-color-light);
 
-  .custom-image {
-    .van-empty__image {
-      width: 90px;
-      height: 90px;
-    }
-  }
-
   .bottom-button {
     width: 160px;
     height: 40px;

packages/vant/src/empty/test/__snapshots__/demo.spec.ts.snap

@@ -94,8 +94,22 @@ exports[`should render demo and match snapshot 1`] = `
   </div>
 </div>
 <div>
-  <div class="van-empty custom-image">
+  <div class="van-empty">
-    <div class="van-empty__image">
+    <div class="van-empty__image"
+         style="width: 100px; height: 100px;"
+    >
+      <img src="https://img.yzcdn.cn/vant/empty-image-default.png">
+    </div>
+    <p class="van-empty__description">
+      Description
+    </p>
+  </div>
+</div>
+<div>
+  <div class="van-empty">
+    <div class="van-empty__image"
+         style="width: 80px; height: 80px;"
+    >
       <img src="https://cdn.jsdelivr.net/npm/@vant/assets/custom-empty-image.png">
     </div>
     <p class="van-empty__description">

packages/vant/src/empty/test/index.spec.ts

@@ -57,3 +57,15 @@ test('should change image size when using image-size prop', async () => {
   expect(image.style.width).toEqual('1vw');
   expect(image.style.height).toEqual('1vw');
 });
+
+test('should allow to set image width and height separately by image-size prop', async () => {
+  const wrapper = mount(Empty, {
+    props: {
+      imageSize: [20, 10],
+    },
+  });
+
+  const image = wrapper.find('.van-empty__image');
+  expect(image.style.width).toEqual('20px');
+  expect(image.style.height).toEqual('10px');
+});