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>