From ab26d3cde158c9a8e558765f523d58b09de28eda Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 14 Jan 2022 09:57:20 +0800
Subject: [PATCH] docs(Image): update demo and document (#10183)

---
 packages/vant/src/image/README.md             |  8 ++-
 packages/vant/src/image/README.zh-CN.md       | 10 +--
 packages/vant/src/image/demo/index.vue        | 14 +---
 .../test/__snapshots__/demo.spec.ts.snap      | 66 -------------------
 4 files changed, 11 insertions(+), 87 deletions(-)

diff --git a/packages/vant/src/image/README.md b/packages/vant/src/image/README.md
index a9df5f7b8..a212addb0 100644
--- a/packages/vant/src/image/README.md
+++ b/packages/vant/src/image/README.md
@@ -26,7 +26,7 @@ app.use(VanImage);
 
 ### Fit Mode
 
-Same as [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
+Same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
 
 ```html
 <van-image
@@ -39,6 +39,8 @@ Same as [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/obj
 
 ### Position
 
+Same as [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position).
+
 ```html
 <van-image
   width="10rem"
@@ -88,8 +90,8 @@ app.use(Lazyload);
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | src | Src | _string_ | - |
-| fit | Fit mode | _string_ | `fill` |
-| position `v3.4.2` | Position, can be set to `center` `top` `right` `bottom` `left` or `string`( same as values of `object-position` ) | _string_ | `center` |
+| fit | Fit mode, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | _string_ | `fill` |
+| position `v3.4.2` | Position, same as [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position), can be set to `top` `right` `bottom` `left` or `string` | _string_ | `center` |
 | alt | Alt | _string_ | - |
 | width | Width | _number \| string_ | - |
 | height | Height | _number \| string_ | - |
diff --git a/packages/vant/src/image/README.zh-CN.md b/packages/vant/src/image/README.zh-CN.md
index ab18d759e..8dd0f42c3 100644
--- a/packages/vant/src/image/README.zh-CN.md
+++ b/packages/vant/src/image/README.zh-CN.md
@@ -28,7 +28,7 @@ app.use(VanImage);
 
 ### 填充模式
 
-通过 `fit` 属性可以设置图片填充模式，可选值见下方表格。
+通过 `fit` 属性可以设置图片填充模式，等同于原生的 [object-fit](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) 属性，可选值见下方表格。
 
 ```html
 <van-image
@@ -39,9 +39,9 @@ app.use(VanImage);
 />
 ```
 
-### 位置
+### 图片位置
 
-通过 `position` 属性可以设置图片位置，结合`fit`属性使用，可选值见下方表格，同[`object-position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position)属性。
+通过 `position` 属性可以设置图片位置，结合 `fit` 属性使用，等同于原生的 [object-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position) 属性。
 
 ```html
 <van-image
@@ -116,8 +116,8 @@ app.use(Lazyload);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | src | 图片链接 | _string_ | - |
-| fit | 图片填充模式 | _string_ | `fill` |
-| position `v3.4.2` | 图片位置，可选值为 `center` `top` `right` `bottom` `left` 或 `string`( 同`object-position` ) | _string_ | `center` |
+| fit | 图片填充模式，等同于原生的 [object-fit](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) 属性 | _string_ | `fill` |
+| position `v3.4.2` | 图片位置，等同于原生的 [object-position](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position) 属性，可选值为 `top` `right` `bottom` `left` 或 `string` | _string_ | `center` |
 | alt | 替代文本 | _string_ | - |
 | width | 宽度，默认单位为 `px` | _number \| string_ | - |
 | height | 高度，默认单位为 `px` | _number \| string_ | - |
diff --git a/packages/vant/src/image/demo/index.vue b/packages/vant/src/image/demo/index.vue
index 9753546d3..4935cc831 100644
--- a/packages/vant/src/image/demo/index.vue
+++ b/packages/vant/src/image/demo/index.vue
@@ -8,7 +8,7 @@ import { useTranslate } from '../../../docs/site/use-translate';
 const t = useTranslate({
   'zh-CN': {
     fitMode: '填充模式',
-    position: '位置',
+    position: '图片位置',
     round: '圆形图片',
     loading: '加载中提示',
     error: '加载失败提示',
@@ -32,7 +32,6 @@ const image = 'https://img.yzcdn.cn/vant/cat.jpeg';
 const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const;
 const positions1 = ['left', 'center', 'right'] as const;
 const positions2 = ['top', 'center', 'bottom'] as const;
-const positions3 = ['10px', '10px 80%', 'center -1em'] as const;
 </script>
 
 <template>
@@ -75,17 +74,6 @@ const positions3 = ['10px', '10px 80%', 'center -1em'] as const;
         <div class="text">contain</div>
         <div class="text">{{ pos }}</div>
       </van-col>
-      <van-col v-for="pos in positions3" span="8" :key="pos">
-        <van-image
-          :position="pos"
-          width="100%"
-          height="27vw"
-          fit="contain"
-          :src="image"
-        />
-        <div class="text">contain</div>
-        <div class="text">{{ pos }}</div>
-      </van-col>
     </van-row>
   </demo-block>
 
diff --git a/packages/vant/src/image/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/image/test/__snapshots__/demo.spec.ts.snap
index 0ad92fb33..d78cfe8e8 100644
--- a/packages/vant/src/image/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/image/test/__snapshots__/demo.spec.ts.snap
@@ -249,72 +249,6 @@ exports[`should render demo and match snapshot 1`] = `
         bottom
       </div>
     </div>
-    <div class="van-col van-col--8"
-         style="padding-right: 13.333333333333334px;"
-    >
-      <div class="van-image"
-           style="width: 100%; height: 27vw;"
-      >
-        <img src="https://img.yzcdn.cn/vant/cat.jpeg"
-             class="van-image__img"
-             style="object-fit: contain; object-position: 10px;"
-        >
-        <div class="van-image__loading">
-          <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
-          </i>
-        </div>
-      </div>
-      <div class="text">
-        contain
-      </div>
-      <div class="text">
-        10px
-      </div>
-    </div>
-    <div style="padding-left: 6.666666666666666px; padding-right: 6.666666666666668px;"
-         class="van-col van-col--8"
-    >
-      <div class="van-image"
-           style="width: 100%; height: 27vw;"
-      >
-        <img src="https://img.yzcdn.cn/vant/cat.jpeg"
-             class="van-image__img"
-             style="object-fit: contain; object-position: 10px 80%;"
-        >
-        <div class="van-image__loading">
-          <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
-          </i>
-        </div>
-      </div>
-      <div class="text">
-        contain
-      </div>
-      <div class="text">
-        10px 80%
-      </div>
-    </div>
-    <div style="padding-left: 13.333333333333332px;"
-         class="van-col van-col--8"
-    >
-      <div class="van-image"
-           style="width: 100%; height: 27vw;"
-      >
-        <img src="https://img.yzcdn.cn/vant/cat.jpeg"
-             class="van-image__img"
-             style="object-fit: contain; object-position: center -1em;"
-        >
-        <div class="van-image__loading">
-          <i class="van-badge__wrapper van-icon van-icon-photo van-image__loading-icon">
-          </i>
-        </div>
-      </div>
-      <div class="text">
-        contain
-      </div>
-      <div class="text">
-        center -1em
-      </div>
-    </div>
   </div>
 </div>
 <div>