feat(ImageViewer): 新增默认缩放比例 (#3678)

* feat(ImageViewer): 新增默认缩放比例

* feat(ImageViewer): 新增监视器监测属性更新

* chore: 迁移代码位置

src/image-viewer/hooks.ts

@@ -1,5 +1,5 @@
 import { positiveSubtract, positiveAdd } from '../_common/js/input-number/number';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { ImageScale } from './type';
 
 interface InitTransform {
@@ -49,8 +49,8 @@ export function useMirror() {
 }
 
 export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5 }) {
-  const { max, min, step } = imageScale;
-  const scale = ref(1);
+  const { max, min, step, defaultScale } = imageScale;
+  const scale = ref(defaultScale ?? 1);
   const onZoomIn = () => {
     const result = positiveAdd(scale.value, step);
     setScale(result);
@@ -60,7 +60,7 @@ export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5
     setScale(result);
   };
   const resetScale = () => {
-    scale.value = 1;
+    scale.value = defaultScale ?? 1;
   };
 
   const setScale = (newScale: number) => {
@@ -74,6 +74,11 @@ export function useScale(imageScale: ImageScale = { max: 2, min: 0.5, step: 0.5
     scale.value = value;
   };
 
+  watch(
+    () => imageScale,
+    () => resetScale(),
+  );
+
   return { scale, onZoomIn, onZoomOut, resetScale };
 }
 

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

@@ -1,15 +1,14 @@
-:: BASE_DOC ::
-
-## API
-### ImageViewer Props
+:: BASE_DOC ::
+
+## API### ImageViewer Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 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-next/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-next/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-next/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | `v-model:index` is supported | N
 defaultIndex | Number | 0 | uncontrolled property | N

src/image-viewer/image-viewer.md

@@ -1,43 +1,14 @@
-:: BASE_DOC ::
-
-## FAQ
-
-### 为什么在 ImageViewer 中无法使用样式穿透？
-
-`ImageViewer` 组件使用 `Vue3` 的 [Teleport](https://cn.vuejs.org/guide/built-ins/teleport.html) 来挂载元素，因此 `:deep()` 深度选择器无法作用于 [Teleport](https://cn.vuejs.org/guide/built-ins/teleport.html) 包裹的元素。
-
-如果必须要进行样式替换，可以采用以下几种方案。
-
-方案一：单独创建一个不使用`scoped`的`style`标签
-```html
-<style>
-.test .t-radio-button__label {
-  color: red;
-}
-</style>
-```
-方案二：使用 `:global` 伪类来实现相同效果，比起单独创建一个`style`更加简洁明了。
-```html
-<style scoped>
-.abc{
-  color: red;
-}
-:global(.test .t-radio-button__label) {
-  color: red;
-}
-</style>
-```
-
-## API
-### ImageViewer Props
+:: BASE_DOC ::
+
+## API### ImageViewer Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
 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-next/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-next/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-next/tree/develop/src/image-viewer/type.ts) | N
 index | Number | 0 | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
 defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N

src/image-viewer/props.ts

@@ -25,7 +25,7 @@ export default {
     type: Boolean,
     default: undefined,
   },
-  /**  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度 */
+  /**  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度；`imageScale.defaultScale` 默认的缩放比例 */
   imageScale: {
     type: Object as PropType<TdImageViewerProps['imageScale']>,
   },

src/image-viewer/type.ts

@@ -26,7 +26,7 @@ export interface TdImageViewerProps {
    */
   draggable?: boolean;
   /**
-   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度
+   *  图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度；`imageScale.defaultScale` 默认的缩放比例
    */
   imageScale?: ImageScale;
   /**
@@ -103,6 +103,7 @@ export interface ImageScale {
   max: number;
   min: number;
   step: number;
+  defaultScale?: number;
 }
 
 export interface ImageInfo {