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 ImagePosition =
|
||||
| 'center'
|
||||
| 'top'
|
||||
| 'right'
|
||||
| 'bottom'
|
||||
| 'left'
|
||||
| string;
|
||||
|
||||
const imageProps = {
|
||||
src: String,
|
||||
alt: String,
|
||||
fit: String as PropType<ImageFit>,
|
||||
position: String as PropType<ImagePosition>,
|
||||
round: Boolean,
|
||||
width: numericProp,
|
||||
height: numericProp,
|
||||
@ -136,6 +145,7 @@ export default defineComponent({
|
||||
class: bem('img'),
|
||||
style: {
|
||||
objectFit: props.fit,
|
||||
objectPosition: props.position,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -26,6 +26,8 @@ app.use(VanImage);
|
||||
|
||||
### Fit Mode
|
||||
|
||||
Same as [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position)
|
||||
|
||||
```html
|
||||
<van-image
|
||||
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
|
||||
|
||||
Show round image, it may not works at `fit=contain` and `fit=scale-down`.
|
||||
@ -75,6 +89,7 @@ app.use(Lazyload);
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
| alt | Alt | _string_ | - |
|
||||
| width | Width | _number \| string_ | - |
|
||||
| height | Height | _number \| string_ | - |
|
||||
@ -119,7 +134,7 @@ app.use(Lazyload);
|
||||
The component exports the following type definitions:
|
||||
|
||||
```ts
|
||||
import type { ImageFit, ImageProps } from 'vant';
|
||||
import type { ImageFit, ImagePosition, ImageProps } from 'vant';
|
||||
```
|
||||
|
||||
## 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` 时，将无法填充一个完整的圆形。
|
||||
@ -103,6 +117,7 @@ app.use(Lazyload);
|
||||
| --- | --- | --- | --- |
|
||||
| src | 图片链接 | _string_ | - |
|
||||
| fit | 图片填充模式 | _string_ | `fill` |
|
||||
| position `v3.4.2` | 图片位置，可选值为 `center` `top` `right` `bottom` `left` 或 `string`( 同`object-position` ) | _string_ | `center` |
|
||||
| alt | 替代文本 | _string_ | - |
|
||||
| width | 宽度，默认单位为 `px` | _number \| string_ | - |
|
||||
| height | 高度，默认单位为 `px` | _number \| string_ | - |
|
||||
@ -147,7 +162,7 @@ app.use(Lazyload);
|
||||
组件导出以下类型定义：
|
||||
|
||||
```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({
|
||||
'zh-CN': {
|
||||
fitMode: '填充模式',
|
||||
position: '位置',
|
||||
round: '圆形图片',
|
||||
loading: '加载中提示',
|
||||
error: '加载失败提示',
|
||||
@ -17,6 +18,7 @@ const t = useTranslate({
|
||||
},
|
||||
'en-US': {
|
||||
fitMode: 'Fit Mode',
|
||||
position: 'Position',
|
||||
round: 'Round',
|
||||
loading: 'Loading',
|
||||
error: 'Error',
|
||||
@ -28,6 +30,9 @@ const t = useTranslate({
|
||||
|
||||
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>
|
||||
@ -46,6 +51,44 @@ const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'] as const;
|
||||
</van-row>
|
||||
</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')">
|
||||
<van-row gutter="20">
|
||||
<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 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 class="van-row">
|
||||
<div class="van-col van-col--8"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user