feat(Image): add block prop (#11022)

packages/vant/package.json

@@ -53,6 +53,7 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.56",
+    "@types/jest": "^27.0.0",
     "@vant/area-data": "workspace:*",
     "@vant/cli": "workspace:*",
     "@vant/eslint-config": "workspace:*",

packages/vant/src/image/Image.tsx

@@ -44,6 +44,7 @@ const imageProps = {
   fit: String as PropType<ImageFit>,
   position: String as PropType<ImagePosition>,
   round: Boolean,
+  block: Boolean,
   width: numericProp,
   height: numericProp,
   radius: numericProp,
@@ -191,7 +192,10 @@ export default defineComponent({
     }
 
     return () => (
-      <div class={bem({ round: props.round })} style={style.value}>
+      <div
+        class={bem({ round: props.round, block: props.block })}
+        style={style.value}
+      >
         {renderImage()}
         {renderPlaceholder()}
         {slots.default?.()}

packages/vant/src/image/README.md

@@ -101,6 +101,7 @@ app.use(Lazyload);
 | height | Height | _number \| string_ | - |
 | radius | Border Radius | _number \| string_ | `0` |
 | round | Whether to be round | _boolean_ | `false` |
+| block `3.6.3` | Whether the root node is a block element | _boolean_ | `false` |
 | lazy-load | Whether to enable lazy load, should register [Lazyload](#/en-US/lazyload) component | _boolean_ | `false` |
 | show-error | Whether to show error placeholder | _boolean_ | `true` |
 | show-loading | Whether to show loading placeholder | _boolean_ | `true` |

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

@@ -127,6 +127,7 @@ app.use(Lazyload);
 | height | 高度，默认单位为 `px` | _number \| string_ | - |
 | radius | 圆角大小，默认单位为 `px` | _number \| string_ | `0` |
 | round | 是否显示为圆形 | _boolean_ | `false` |
+| block `3.6.3` | 是否将根节点设置为块级元素，默认情况下为 `inline-block` 元素 | _boolean_ | `false` |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | _boolean_ | `false` |
 | show-error | 是否展示图片加载失败提示 | _boolean_ | `true` |
 | show-loading | 是否展示图片加载中提示 | _boolean_ | `true` |

packages/vant/src/image/index.less

@@ -23,6 +23,10 @@
     }
   }
 
+  &--block {
+    display: block;
+  }
+
   &__img,
   &__error,
   &__loading {