From 39fe0a4e220102690ad580eeef0cd06663a04ca2 Mon Sep 17 00:00:00 2001 From: Icey Wu <66096254+IceyWu@users.noreply.github.com> Date: Thu, 12 Oct 2023 23:23:48 +0800 Subject: [PATCH] feat(components): [image-viewer] add `minScale` and `maxScale` (#14120) * fix(components): [image-viewer] add scale props * docs(components): [image] add min-scale and max-scale properties * feat(components): [image] add minScale and maxScale properties * docs(components): [image] add example properties * docs(components): [image] add docs properties * docs(components): [image] add docs properties * docs(components): [image] update version tag --- docs/en-US/component/image.md | 4 ++++ docs/examples/image/image-preview.vue | 2 ++ .../components/image-viewer/src/image-viewer.ts | 14 ++++++++++++++ .../components/image-viewer/src/image-viewer.vue | 5 +++-- packages/components/image/src/image.ts | 14 ++++++++++++++ packages/components/image/src/image.vue | 2 ++ 6 files changed, 39 insertions(+), 2 deletions(-) diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md index 566a721a7a..2df6a25c92 100644 --- a/docs/en-US/component/image.md +++ b/docs/en-US/component/image.md @@ -76,6 +76,8 @@ image/image-preview | preview-teleported | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false | | infinite | whether the viewer preview is infinite. | ^[boolean] | true | | zoom-rate | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 | +| min-scale ^(2.4.0) | the min scale of the image viewer zoom event. | ^[number] | 0.2 | +| max-scale ^(2.4.0) | the max scale of the image viewer zoom event. | ^[number] | 7 | ### Image Events @@ -108,6 +110,8 @@ image/image-preview | hide-on-click-modal | whether user can emit close event when clicking backdrop. | ^[boolean] | false | | teleported | whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false | | zoom-rate ^(2.2.27) | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 | +| min-scale ^(2.4.0) | the min scale of the image viewer zoom event. | ^[number] | 0.2 | +| max-scale ^(2.4.0) | the max scale of the image viewer zoom event. | ^[number] | 7 | | close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | ^[boolean] | true | ### Image Viewer Events diff --git a/docs/examples/image/image-preview.vue b/docs/examples/image/image-preview.vue index b9d96c7719..32b73dd266 100644 --- a/docs/examples/image/image-preview.vue +++ b/docs/examples/image/image-preview.vue @@ -4,6 +4,8 @@ style="width: 100px; height: 100px" :src="url" :zoom-rate="1.2" + :max-scale="7" + :min-scale="0.2" :preview-src-list="srcList" :initial-index="4" fit="cover" diff --git a/packages/components/image-viewer/src/image-viewer.ts b/packages/components/image-viewer/src/image-viewer.ts index 251e8bf148..c5fea656b7 100644 --- a/packages/components/image-viewer/src/image-viewer.ts +++ b/packages/components/image-viewer/src/image-viewer.ts @@ -64,6 +64,20 @@ export const imageViewerProps = buildProps({ type: Number, default: 1.2, }, + /** + * @description the min scale of the image viewer zoom event. + */ + minScale: { + type: Number, + default: 0.2, + }, + /** + * @description the max scale of the image viewer zoom event. + */ + maxScale: { + type: Number, + default: 7, + }, } as const) export type ImageViewerProps = ExtractPropTypes diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue index c6a0f0df82..3784116199 100644 --- a/packages/components/image-viewer/src/image-viewer.vue +++ b/packages/components/image-viewer/src/image-viewer.vue @@ -322,6 +322,7 @@ function next() { function handleActions(action: ImageViewerAction, options = {}) { if (loading.value) return + const { minScale, maxScale } = props const { zoomRate, rotateDeg, enableTransition } = { zoomRate: props.zoomRate, rotateDeg: 90, @@ -330,14 +331,14 @@ function handleActions(action: ImageViewerAction, options = {}) { } switch (action) { case 'zoomOut': - if (transform.value.scale > 0.2) { + if (transform.value.scale > minScale) { transform.value.scale = Number.parseFloat( (transform.value.scale / zoomRate).toFixed(3) ) } break case 'zoomIn': - if (transform.value.scale < 7) { + if (transform.value.scale < maxScale) { transform.value.scale = Number.parseFloat( (transform.value.scale * zoomRate).toFixed(3) ) diff --git a/packages/components/image/src/image.ts b/packages/components/image/src/image.ts index db783c512e..6d683119cb 100644 --- a/packages/components/image/src/image.ts +++ b/packages/components/image/src/image.ts @@ -89,6 +89,20 @@ export const imageProps = buildProps({ type: Number, default: 1.2, }, + /** + * @description the min scale of the image viewer zoom event. + */ + minScale: { + type: Number, + default: 0.2, + }, + /** + * @description the max scale of the image viewer zoom event. + */ + maxScale: { + type: Number, + default: 7, + }, } as const) export type ImageProps = ExtractPropTypes diff --git a/packages/components/image/src/image.vue b/packages/components/image/src/image.vue index 2a2d3a1ca5..d0b4f03d9e 100644 --- a/packages/components/image/src/image.vue +++ b/packages/components/image/src/image.vue @@ -28,6 +28,8 @@ :initial-index="imageIndex" :infinite="infinite" :zoom-rate="zoomRate" + :min-scale="minScale" + :max-scale="maxScale" :url-list="previewSrcList" :hide-on-click-modal="hideOnClickModal" :teleported="previewTeleported"