docs(image-viewer): sync api (#1637)

* fix(image-viewer): fix ts type * docs: sync api * fix: onIndexChange trigger
Tencent · Nov 19, 2024 · 5b3d2cc · 5b3d2cc
1 parent 162f337
commit 5b3d2cc
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 36 deletions.
diff --git a/src/image-viewer/image-viewer-interface.ts b/src/image-viewer/image-viewer-interface.ts
diff --git a/src/image-viewer/image-viewer.en-US.md b/src/image-viewer/image-viewer.en-US.md
@@ -8,27 +8,27 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 deleteBtn | Boolean / Slot / Function | false | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-images | Array | [] | Typescript：`Array<string\|{url: string;align: 'start' \| 'center' \| 'end';}>` | N
+images | Array | [] | Typescript：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | - | `v-model:index` is supported | N
 defaultIndex | Number | - | uncontrolled property | N
 maxZoom | Number | 3 | Typescript：`Number` | N
 showIndex | Boolean | false | \- | N
 visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N
 defaultVisible | Boolean | false | hide or show image viewer。uncontrolled property | N
-onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`<br/> | N
-onDelete | Function |  | Typescript：`(index: Number) => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/> | N
+onDelete | Function |  | Typescript：`(index: number) => void`<br/> | N
 onIndexChange | Function |  | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/> | N
 
 ### ImageViewer Events
 
 name | params | description
 -- | -- | --
-close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | \-
-delete | `(index: Number)` | \-
+close | `(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number })` | \-
+delete | `(index: number)` | \-
 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -38,4 +38,4 @@ Name | Default Value | Description
 --td-image-viewer-nav-bg-color | @font-gray-3 | - 
 --td-image-viewer-nav-color | @font-white-1 | - 
 --td-image-viewer-nav-height | 48px | - 
---td-image-viewer-nav-index-font-size | @font-size-base | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | -
diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md
@@ -8,27 +8,27 @@
 -- | -- | -- | -- | --
 closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 deleteBtn | Boolean / Slot / Function | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-images | Array | [] | 图片数组。TS 类型：`Array<string\|{url: string;align: 'start' \| 'center' \| 'end';}>` | N
+images | Array | [] | 图片数组。TS 类型：`Array<string \| ImageInfo>` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N
 index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N
 defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N
 maxZoom | Number | 3 | 【开发中】最大放大比例。TS 类型：`Number` | N
 showIndex | Boolean | false | 是否显示页码 | N
 visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N
 defaultVisible | Boolean | false | 隐藏/显示预览。非受控属性 | N
-onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number }) => void`<br/>关闭时触发 | N
-onDelete | Function |  | TS 类型：`(index: Number) => void`<br/>点击删除操作按钮时触发 | N
+onClose | Function |  | TS 类型：`(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number }) => void`<br/>关闭时触发 | N
+onDelete | Function |  | TS 类型：`(index: number) => void`<br/>点击删除操作按钮时触发 | N
 onIndexChange | Function |  | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`<br/>预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N
 
 ### ImageViewer Events
 
 名称 | 参数 | 描述
 -- | -- | --
-close | `(context: { trigger: 'overlay' \| 'close-btn', visible: Boolean, index: Number })` | 关闭时触发
-delete | `(index: Number)` | 点击删除操作按钮时触发
+close | `(context: { trigger: 'overlay' \| 'close-btn', visible: boolean, index: number })` | 关闭时触发
+delete | `(index: number)` | 点击删除操作按钮时触发
 index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -38,4 +38,4 @@ index-change | `(index: number, context: { trigger: 'prev' \| 'next' })` | 预
 --td-image-viewer-nav-bg-color | @font-gray-3 | - 
 --td-image-viewer-nav-color | @font-white-1 | - 
 --td-image-viewer-nav-height | 48px | - 
---td-image-viewer-nav-index-font-size | @font-size-base | - 
+--td-image-viewer-nav-index-font-size | @font-size-base | -
diff --git a/src/image-viewer/image-viewer.tsx b/src/image-viewer/image-viewer.tsx
@@ -8,23 +8,15 @@ import { useTNodeJSX } from '../hooks/tnode';
 import { usePrefixClass } from '../hooks/useClass';
 
 // inner components
-import { Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
-import TImage from '../image';
-import { TdImageViewerProps } from './type';
-import { ImageInfo } from './image-viewer-interface';
+import { SwiperChangeSource, Swiper as TSwiper, SwiperItem as TSwiperItem } from '../swiper';
+import { TdImageViewerProps, ImageInfo } from './type';
 
 const { prefix } = config;
 
 const TAP_TIME = 300;
 
 export default defineComponent({
   name: `${prefix}-image-viewer`,
-  components: {
-    Transition,
-    TSwiper,
-    TSwiperItem,
-    TImage,
-  },
   props,
   emits: ['close', 'index-change', 'update:visible', 'update:modelValue', 'update:index', 'delete'],
   setup(props, { emit }) {
@@ -85,7 +77,7 @@ export default defineComponent({
 
     const disabled = ref(false);
     const rootRef = ref();
-    const imagesSize = reactive({});
+    const imagesSize: Record<number, { height: number }> = reactive({});
     const swiperRootRef = ref();
     const swiperItemRefs = ref<any[]>([]);
     const gestureRef = ref();
@@ -133,9 +125,10 @@ export default defineComponent({
       imageInfoList.value[nextIndex].preload = true;
     };
 
-    const onSwiperChange = (index: number, context: any) => {
+    const onSwiperChange = (index: number, context: { source: SwiperChangeSource }) => {
       if (currentIndex.value !== index) {
-        setIndex(index, { context });
+        const trigger = currentIndex.value < index ? 'next' : 'prev';
+        setIndex(index, { trigger });
         setScale(1);
         setImagePreload(index);
       }
@@ -393,7 +386,7 @@ export default defineComponent({
     });
 
     return () => (
-      <transition name="fade">
+      <Transition name="fade">
         {visible.value && (
           <div ref={rootRef} class={`${imageViewerClass.value}`}>
             <div class={`${imageViewerClass.value}__mask`} onClick={(e) => handleClose(e, 'overlay')} />
@@ -455,7 +448,7 @@ export default defineComponent({
             </div>
           </div>
         )}
-      </transition>
+      </Transition>
     );
   },
 });
diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts
@@ -21,7 +21,7 @@ export interface TdImageViewerProps {
    * 图片数组
    * @default []
    */
-  images?: Array<string | { url: string; align: 'start' | 'center' | 'end' }>;
+  images?: Array<string | ImageInfo>;
   /**
    * 当前预览图片所在的下标
    */
@@ -58,13 +58,18 @@ export interface TdImageViewerProps {
   /**
    * 关闭时触发
    */
-  onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: Boolean; index: Number }) => void;
+  onClose?: (context: { trigger: 'overlay' | 'close-btn'; visible: boolean; index: number }) => void;
   /**
    * 点击删除操作按钮时触发
    */
-  onDelete?: (index: Number) => void;
+  onDelete?: (index: number) => void;
   /**
    * 预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片
    */
   onIndexChange?: (index: number, context: { trigger: 'prev' | 'next' }) => void;
 }
+
+export interface ImageInfo {
+  url: string;
+  align: 'start' | 'center' | 'end';
+}