mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(Image): update demo and document (#10183)
This commit is contained in:
neverland
GitHub
parent
4dbd6702b0
commit
ab26d3cde1
@ -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_ | - |
|
||||
|
||||
@ -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_ | - |
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user