fix(imageviewer): 添加defaultScale (#3013)

添加defaultScale

src/image-viewer/const.ts

@@ -6,4 +6,11 @@ export const enum EVENT_CODE {
   esc = 'Escape',
 }
 
+export const DEFAULT_IMAGE_SCALE = {
+  max: 2,
+  min: 0.5,
+  step: 0.5,
+  defaultScale: 1,
+};
+
 export default EVENT_CODE;

src/image-viewer/hooks.ts

@@ -1,5 +1,6 @@
-import { ref } from 'vue';
+import { ref, ComputedRef } from 'vue';
 import { ImageScale } from './type';
+import { DEFAULT_IMAGE_SCALE } from './const';
 
 interface InitTransform {
   translateX: number;
@@ -47,20 +48,17 @@ export function useMirror() {
   return { mirror, onMirror, resetMirror };
 }
 
-export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5 }) {
-  const { max, min, step } = imageScale;
-  const scale = ref(1);
-  const onZoomIn = () => {
-    setScale(scale.value + step);
-  };
-  const onZoomOut = () => {
-    setScale(scale.value - step);
-  };
-  const resetScale = () => {
-    scale.value = 1;
-  };
+export function useScale(imageScale: ComputedRef<ImageScale>) {
+  const {
+    max = DEFAULT_IMAGE_SCALE.max,
+    min = DEFAULT_IMAGE_SCALE.min,
+    defaultScale = DEFAULT_IMAGE_SCALE.defaultScale,
+  } = imageScale.value;
+  const scaleVal = Math.min(Math.max(defaultScale, min), max);
+  const scale = ref(scaleVal);
 
   const setScale = (newScale: number) => {
+    const { max = DEFAULT_IMAGE_SCALE.max, min = DEFAULT_IMAGE_SCALE.min } = imageScale.value;
     let value = newScale;
     if (newScale < min) {
       value = min;
@@ -71,6 +69,18 @@ export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5
     scale.value = value;
   };
 
+  const onZoomIn = () => {
+    const { step = DEFAULT_IMAGE_SCALE.step } = imageScale.value;
+    setScale(scale.value + step);
+  };
+  const onZoomOut = () => {
+    const { step = DEFAULT_IMAGE_SCALE.step } = imageScale.value;
+    setScale(scale.value - step);
+  };
+  const resetScale = () => {
+    scale.value = scaleVal;
+  };
+
   return {
     scale,
     onZoomIn,

src/image-viewer/image-viewer.en-US.md

@@ -9,7 +9,7 @@ closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。
 closeOnEscKeydown | Boolean | true | trigger image viewer close event on `ESC` keydown | N
 closeOnOverlay | Boolean | - | \- | N
 draggable | Boolean | undefined | \- | N
-imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
+imageScale | Object | - | Typescript：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | Typescript：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `.sync` is supported | N
 defaultIndex | Number | 0 | uncontrolled property | N

src/image-viewer/image-viewer.md

@@ -9,7 +9,7 @@ closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为
 closeOnEscKeydown | Boolean | true | 按下 ESC 时是否触发图片预览器关闭事件 | N
 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N
 draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N
-imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
+imageScale | Object | - |  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度; `imageScale.defaultScale` 默认的缩放比例。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number; defaultScale?: number; }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array<string \| File \| ImageInfo>` `interface ImageInfo { mainImage: string \| File; thumbnail?: string \| File; download?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `.sync` | N
 defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N

src/image-viewer/image-viewer.tsx

@@ -16,7 +16,7 @@ import { setTransform } from '../utils/helper';
 import { TdImageViewerProps } from './type';
 import { useMirror, useRotate, useScale } from './hooks';
 import { formatImages, getOverlay } from './utils';
-import { EVENT_CODE } from './const';
+import { EVENT_CODE, DEFAULT_IMAGE_SCALE } from './const';
 import Image from '../image';
 
 export default defineComponent({
@@ -61,10 +61,11 @@ export default defineComponent({
       isExpand.value = !isExpand.value;
     };
 
+    const imageScaleRef = computed(() => props.imageScale ?? DEFAULT_IMAGE_SCALE);
     const { mirror, onMirror, resetMirror } = useMirror();
     const {
       scale, onZoomIn, onZoomOut, resetScale,
-    } = useScale(props.imageScale);
+    } = useScale(imageScaleRef);
     const { rotate, onRotate, resetRotate } = useRotate();
     const onRest = () => {
       resetMirror();

src/image-viewer/type.ts

@@ -98,6 +98,7 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
 }
 
 export interface ImageInfo {