From b3da7f7383d77a632aafabeeedf4dc3073da6e0d Mon Sep 17 00:00:00 2001 From: Jungzl <35426360+Jungzl@users.noreply.github.com> Date: Wed, 12 Jan 2022 16:56:07 +0800 Subject: [PATCH] feat(Image): add position prop (#10142) * feat(Image): add position prop * fix(Image): adjust position prop type * fix(Image): update demo snapshot --- packages/vant/src/image/Image.tsx | 10 + packages/vant/src/image/README.md | 17 +- packages/vant/src/image/README.zh-CN.md | 17 +- packages/vant/src/image/demo/index.vue | 43 ++++ .../test/__snapshots__/demo.spec.ts.snap | 202 ++++++++++++++++++ 5 files changed, 287 insertions(+), 2 deletions(-) diff --git a/packages/vant/src/image/Image.tsx b/packages/vant/src/image/Image.tsx index d1fb5b400..ee61359de 100644 --- a/packages/vant/src/image/Image.tsx +++ b/packages/vant/src/image/Image.tsx @@ -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, + position: String as PropType, round: Boolean, width: numericProp, height: numericProp, @@ -136,6 +145,7 @@ export default defineComponent({ class: bem('img'), style: { objectFit: props.fit, + objectPosition: props.position, }, }; diff --git a/packages/vant/src/image/README.md b/packages/vant/src/image/README.md index f8d9705d6..a9df5f7b8 100644 --- a/packages/vant/src/image/README.md +++ b/packages/vant/src/image/README.md @@ -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 ``` +### Position + +```html + +``` + ### 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 diff --git a/packages/vant/src/image/README.zh-CN.md b/packages/vant/src/image/README.zh-CN.md index 76e2e67c8..ab18d759e 100644 --- a/packages/vant/src/image/README.zh-CN.md +++ b/packages/vant/src/image/README.zh-CN.md @@ -39,6 +39,20 @@ app.use(VanImage); /> ``` +### 位置 + +通过 `position` 属性可以设置图片位置，结合`fit`属性使用，可选值见下方表格，同[`object-position`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position)属性。 + +```html + +``` + ### 圆形图片 通过 `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'; ``` ## 主题定制 diff --git a/packages/vant/src/image/demo/index.vue b/packages/vant/src/image/demo/index.vue index c076cbe94..9753546d3 100644 --- a/packages/vant/src/image/demo/index.vue +++ b/packages/vant/src/image/demo/index.vue @@ -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;