From 22ae17a8eca46fcf797373f5dc1526eed98ac799 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= Date: Fri, 1 Dec 2023 20:36:01 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(ImageViewer):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E9=BB=98=E8=AE=A4=E7=BC=A9=E6=94=BE=E6=AF=94=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/image-viewer/hooks.ts | 6 ++--- src/image-viewer/image-viewer.en-US.md | 9 +++---- src/image-viewer/image-viewer.md | 37 +++----------------------- src/image-viewer/props.ts | 2 +- src/image-viewer/type.ts | 3 ++- 5 files changed, 14 insertions(+), 43 deletions(-) diff --git a/src/image-viewer/hooks.ts b/src/image-viewer/hooks.ts index 29420a83a8..14c0fea937 100644 --- a/src/image-viewer/hooks.ts +++ b/src/image-viewer/hooks.ts @@ -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) => { diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md index a507da3a27..975731ec35 100644 --- a/src/image-viewer/image-viewer.en-US.md +++ b/src/image-viewer/image-viewer.en-US.md @@ -1,7 +1,6 @@ -:: BASE_DOC :: - -## API -### ImageViewer Props +:: BASE_DOC :: + +## API ### ImageViewer Props name | type | default | description | required -- | -- | -- | -- | -- @@ -9,7 +8,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-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` `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 diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md index 2b38657dde..1cdd7dac97 100644 --- a/src/image-viewer/image-viewer.md +++ b/src/image-viewer/image-viewer.md @@ -1,35 +1,6 @@ -:: 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 - -``` -方案二：使用 `:global` 伪类来实现相同效果，比起单独创建一个`style`更加简洁明了。 -```html - -``` - -## API -### ImageViewer Props +:: BASE_DOC :: + +## API ### ImageViewer Props 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- @@ -37,7 +8,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-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` `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 diff --git a/src/image-viewer/props.ts b/src/image-viewer/props.ts index c736635386..0bcad4d280 100644 --- a/src/image-viewer/props.ts +++ b/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, }, diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts index 8b65c81d56..b579bb2fde 100644 --- a/src/image-viewer/type.ts +++ b/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 { From 05b3a332eee95f8dbc91e6db2e819db1e98dbb13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= Date: Mon, 4 Dec 2023 20:36:50 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(ImageViewer):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=9B=91=E8=A7=86=E5=99=A8=E7=9B=91=E6=B5=8B=E5=B1=9E=E6=80=A7?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/image-viewer/image-viewer.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx index b81077f1f7..eda14c0e77 100644 --- a/src/image-viewer/image-viewer.tsx +++ b/src/image-viewer/image-viewer.tsx @@ -119,6 +119,11 @@ export default defineComponent({ } }; + watch( + () => props.imageScale, + () => resetScale(), + ); + watch( () => visibleValue.value, (val) => { From 8bc9cf237215d3669a4c4fe07c1c56df8c905e61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=82=A0=E9=9D=99=E8=90=9D=E8=8E=89?= Date: Thu, 7 Dec 2023 17:52:17 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E8=BF=81=E7=A7=BB=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E4=BD=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/image-viewer/hooks.ts | 7 ++++++- src/image-viewer/image-viewer.tsx | 5 ----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/image-viewer/hooks.ts b/src/image-viewer/hooks.ts index 14c0fea937..f3b8178f6a 100644 --- a/src/image-viewer/hooks.ts +++ b/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 { @@ -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 }; } diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx index eda14c0e77..b81077f1f7 100644 --- a/src/image-viewer/image-viewer.tsx +++ b/src/image-viewer/image-viewer.tsx @@ -119,11 +119,6 @@ export default defineComponent({ } }; - watch( - () => props.imageScale, - () => resetScale(), - ); - watch( () => visibleValue.value, (val) => {