mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Image): add position prop (#10142)
* feat(Image): add position prop * fix(Image): adjust position prop type * fix(Image): update demo snapshot
This commit is contained in:
Jungzl
GitHub
parent
b0fbff0646
commit
b3da7f7383
@ -29,10 +29,19 @@ const [name, bem] = createNamespace('image');
|
|||||||
|
|
||||||
export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
|
||||||
|
|
||||||
|
export type ImagePosition =
|
||||||
|
| 'center'
|
||||||
|
| 'top'
|
||||||
|
| 'right'
|
||||||
|
| 'bottom'
|
||||||
|
| 'left'
|
||||||
|
| string;
|
||||||
|
|
||||||
const imageProps = {
|
const imageProps = {
|
||||||
src: String,
|
src: String,
|
||||||
alt: String,
|
alt: String,
|
||||||
fit: String as PropType<ImageFit>,
|
fit: String as PropType<ImageFit>,
|
||||||
|
position: String as PropType<ImagePosition>,
|
||||||
round: Boolean,
|
round: Boolean,
|
||||||
width: numericProp,
|
width: numericProp,
|
||||||
height: numericProp,
|
height: numericProp,
|
||||||
@ -136,6 +145,7 @@ export default defineComponent({
|
|||||||
class: bem('img'),
|
class: bem('img'),
|
||||||
style: {
|
style: {
|
||||||
objectFit: props.fit,
|
objectFit: props.fit,
|
||||||
|
objectPosition: props.position,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -26,6 +26,8 @@ app.use(VanImage);
|
|||||||
|
|
||||||
### Fit Mode
|
### Fit Mode
|
||||||
|
|
||||||
|
Same as [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-image
|
<van-image
|
||||||
width="10rem"
|
width="10rem"
|
||||||
@ -35,6 +37,18 @@ app.use(VanImage);
|
|||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Position
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-image
|
||||||
|
width="10rem"
|
||||||
|
height="10rem"
|
||||||
|
fit="cover"
|
||||||
|
position="left"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
### Round
|
### Round
|
||||||
|
|
||||||
Show round image, it may not works at `fit=contain` and `fit=scale-down`.
|
Show round image, it may not works at `fit=contain` and `fit=scale-down`.
|
||||||
@ -75,6 +89,7 @@ app.use(Lazyload);
|
|||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| src | Src | _string_ | - |
|
| src | Src | _string_ | - |
|
||||||
| fit | Fit mode | _string_ | `fill` |
|
| 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` |
|
||||||
| alt | Alt | _string_ | - |
|
| alt | Alt | _string_ | - |
|
||||||
| width | Width | _number \| string_ | - |
|
| width | Width | _number \| string_ | - |
|
||||||
| height | Height | _number \| string_ | - |
|
| height | Height | _number \| string_ | - |
|
||||||
@ -119,7 +134,7 @@ app.use(Lazyload);
|
|||||||
The component exports the following type definitions:
|
The component exports the following type definitions:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import type { ImageFit, ImageProps } from 'vant';
|
import type { ImageFit, ImagePosition, ImageProps } from 'vant';
|
||||||
```
|
```
|
||||||
|
|
||||||
## Theming
|
## Theming
|
||||||
|
|||||||
@ -39,6 +39,20 @@ app.use(VanImage);
|
|||||||
/>
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 位置
|
||||||
|
|
||||||
|
通过 `position` 属性可以设置图片位置，结合`fit`属性使用，可选值见下方表格，同[`object-position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position)属性。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-image
|
||||||
|
width="10rem"
|
||||||
|
height="10rem"
|
||||||
|
fit="cover"
|
||||||
|
position="left"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
### 圆形图片
|
### 圆形图片
|
||||||
|
|
||||||
通过 `round` 属性可以设置图片变圆，注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时，将无法填充一个完整的圆形。
|
通过 `round` 属性可以设置图片变圆，注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时，将无法填充一个完整的圆形。
|
||||||
@ -103,6 +117,7 @@ app.use(Lazyload);
|
|||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| src | 图片链接 | _string_ | - |
|
| src | 图片链接 | _string_ | - |
|
||||||
| fit | 图片填充模式 | _string_ | `fill` |
|
| fit | 图片填充模式 | _string_ | `fill` |
|
||||||
|
| position `v3.4.2` | 图片位置，可选值为 `center` `top` `right` `bottom` `left` 或 `string`( 同`object-position` ) | _string_ | `center` |
|
||||||
| alt | 替代文本 | _string_ | - |
|
| alt | 替代文本 | _string_ | - |
|
||||||
| width | 宽度，默认单位为 `px` | _number \| string_ | - |
|
| width | 宽度，默认单位为 `px` | _number \| string_ | - |
|
||||||
| height | 高度，默认单位为 `px` | _number \| string_ | - |
|
| height | 高度，默认单位为 `px` | _number \| string_ | - |
|
||||||
@ -147,7 +162,7 @@ app.use(Lazyload);
|
|||||||
组件导出以下类型定义：
|
组件导出以下类型定义：
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import type { ImageFit, ImageProps } from 'vant';
|
import type { ImageFit, ImagePosition, ImageProps } from 'vant';
|
||||||
```
|
```
|
||||||
|
|
||||||
## 主题定制
|
## 主题定制
|
||||||
|
|||||||
@ -8,6 +8,7 @@ import { useTranslate } from '../../../docs/site/use-translate';
|
|||||||
const t = useTranslate({
|
const t = useTranslate({
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
fitMode: '填充模式',
|
fitMode: '填充模式',
|
||||||
|
position: '位置',
|
||||||
round: '圆形图片',
|
round: '圆形图片',
|
||||||
loading: '加载中提示',
|
loading: '加载中提示',
|
||||||
error: '加载失败提示',
|
error: '加载失败提示',
|
||||||
@ -17,6 +18,7 @@ const t = useTranslate({
|
|||||||
},
|
},
|
||||||
'en-US': {
|
'en-US': {
|
||||||
fitMode: 'Fit Mode',
|
fitMode: 'Fit Mode',
|
||||||
|
position: 'Position',
|
||||||
round: 'Round',
|
round: 'Round',
|
||||||
loading: 'Loading',
|
loading: 'Loading',
|
||||||
error: 'Error',
|
error: 'Error',
|
||||||
@ -28,6 +30,9 @@ const t = useTranslate({
|
|||||||
|
|
||||||
const image = 'https://img.yzcdn.cn/vant/cat.jpeg';
|
const image = 'https://img.yzcdn.cn/vant/cat.jpeg';
|
||||||
const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const;
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -46,6 +51,44 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const;
|
|||||||
</van-row>
|
</van-row>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block :title="t('position')">
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col v-for="pos in positions1" span="8" :key="pos">
|
||||||
|
<van-image
|
||||||
|
:position="pos"
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
fit="cover"
|
||||||
|
:src="image"
|
||||||
|
/>
|
||||||
|
<div class="text">cover</div>
|
||||||
|
<div class="text">{{ pos }}</div>
|
||||||
|
</van-col>
|
||||||
|
<van-col v-for="pos in positions2" 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-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>
|
||||||
|
|
||||||
<demo-block :title="t('round')">
|
<demo-block :title="t('round')">
|
||||||
<van-row gutter="20">
|
<van-row gutter="20">
|
||||||
<van-col v-for="fit in fits" span="8" :key="fit">
|
<van-col v-for="fit in fits" span="8" :key="fit">
|
||||||
|
|||||||
@ -115,6 +115,208 @@ exports[`should render demo and match snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-row">
|
||||||
|
<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: cover; object-position: left;"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
cover
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
left
|
||||||
|
</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: cover; object-position: center;"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
cover
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
center
|
||||||
|
</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: cover; object-position: right;"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
cover
|
||||||
|
</div>
|
||||||
|
<div class="text">
|
||||||
|
right
|
||||||
|
</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: top;"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
top
|
||||||
|
</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: center;"
|
||||||
|
>
|
||||||
|
<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
|
||||||
|
</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: bottom;"
|
||||||
|
>
|
||||||
|
<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">
|
||||||
|
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>
|
<div>
|
||||||
<div class="van-row">
|
<div class="van-row">
|
||||||
<div class="van-col van-col--8"
|
<div class="van-col van-col--8"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user