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

@@ -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

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"

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<typeof imageViewerProps>
 

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)
         )

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<typeof imageProps>
 

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"