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/dialog/README.zh-CN.md

@@ -198,10 +198,10 @@ export default {
 | --- | --- | --- | --- |
 | v-model | 是否显示弹窗 | _boolean_ | - |
 | title | 标题 | _string_ | - |
-| width | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` |
-| message | 文本内容，支持通过`\n`换行 | _string_ | - |
-| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` |
-| theme | 样式风格，可选值为`round-button` | _string_ | `default` |
+| width | 弹窗宽度，默认单位为 `px` | _number \| string_ | `320px` |
+| message | 文本内容，支持通过 `\n` 换行 | _string_ | - |
+| message-align | 内容对齐方式，可选值为 `left` `right` | _string_ | `center` |
+| theme | 样式风格，可选值为 `round-button` | _string_ | `default` |
 | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` |
 | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` |
 | confirm-button-text | 确认按钮文案 | _string_ | `确认` |
@@ -217,7 +217,7 @@ export default {
 | lock-scroll | 是否锁定背景滚动 | _boolean_ | `true` |
 | allow-html `v2.8.7` | 是否允许 message 内容中渲染 HTML | _boolean_ | `true` |
 | before-close | 关闭前的回调函数，<br>调用 done() 后关闭弹窗，<br>调用 done(false) 阻止弹窗关闭 | _(action, done) => void_ | - |
-| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | - |
+| transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的 `name` 属性 | _string_ | - |
 | get-container | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | - |
 
 ### Events

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: {