feat(empty): add imag-size prop (#7389)

src/dialog/README.md

@@ -138,7 +138,7 @@ export default {
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | title | Title | _string_ | - |
-| width | Width | _number \| string_ | `320px` |
+| width | Dialog width | _number \| string_ | `320px` |
 | message | Message | _string_ | - |
 | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` |
 | theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` |

src/empty/README.md

@@ -70,6 +70,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 `v2.10.11` | Image size | _number \| string_ | - |
 | description | Desciption | _string_ | - |
 
 ### Slots

src/empty/README.zh-CN.md

@@ -79,6 +79,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
+| image-size `v2.10.11` | 图片大小，默认单位为 `px` | _number \| string_ | - |
 | description | 图片下方的描述文字 | _string_ | - |
 
 ### Slots

src/empty/index.js

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { addUnit, createNamespace } from '../utils';
 import Network from './Network';
 
 const [createComponent, bem] = createNamespace('empty');
@@ -7,6 +7,7 @@ const PRESETS = ['error', 'search', 'default'];
 
 export default createComponent({
   props: {
+    imageSize: [Number, String],
     description: String,
     image: {
       type: String,
@@ -36,7 +37,16 @@ export default createComponent({
     },
 
     genImage() {
-      return <div class={bem('image')}>{this.genImageContent()}</div>;
+      const imageStyle = {
+        width: addUnit(this.imageSize),
+        height: addUnit(this.imageSize),
+      };
+
+      return (
+        <div class={bem('image')} style={imageStyle}>
+          {this.genImageContent()}
+        </div>
+      );
     },
 
     genDescription() {

src/empty/test/index.spec.js

@@ -40,3 +40,20 @@ test('render svg when image is network', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('image-size prop', () => {
+  const wrapper = mount(Empty, {
+    propsData: {
+      imageSize: 50,
+    },
+  });
+
+  const image = wrapper.find('.van-empty__image').element;
+
+  expect(image.style.width).toEqual('50px');
+  expect(image.style.height).toEqual('50px');
+
+  wrapper.setProps({ imageSize: '1vw' });
+  expect(image.style.width).toEqual('1vw');
+  expect(image.style.height).toEqual('1vw');
+});

src/field/index.js

@@ -54,7 +54,7 @@ export default createComponent({
     errorMessageAlign: String,
     showWordLimit: Boolean,
     value: {
-      type: [String, Number],
+      type: [Number, String],
       default: '',
     },
     type: {