From 7bbca04b8f6bb4f413b50ad79997430946e8da4a Mon Sep 17 00:00:00 2001 From: anlyyao Date: Fri, 24 Apr 2026 16:11:10 +0800 Subject: [PATCH 1/2] feat(ImageViewer): add loop prop --- db/TDesign.db | Bin 1134592 -> 1134592 bytes .../components/image-viewer/README.en-US.md | 1 + .../components/image-viewer/README.md | 1 + .../packages/components/image-viewer/props.ts | 5 ++ .../packages/components/image-viewer/type.ts | 8 ++++ .../image-viewer/README.en-US.md | 1 + .../uniapp-components/image-viewer/README.md | 1 + .../uniapp-components/image-viewer/props.ts | 5 ++ .../uniapp-components/image-viewer/type.ts | 5 ++ .../src/image-viewer/defaultProps.ts | 1 + .../src/image-viewer/image-viewer.en-US.md | 1 + .../src/image-viewer/image-viewer.md | 1 + .../src/image-viewer/type.ts | 5 ++ .../src/image-viewer/image-viewer.en-US.md | 1 + .../src/image-viewer/image-viewer.md | 1 + .../src/image-viewer/props.ts | 5 ++ .../src/image-viewer/type.ts | 5 ++ packages/scripts/api.json | 43 ++++++++++++++++++ 18 files changed, 90 insertions(+) diff --git a/db/TDesign.db b/db/TDesign.db index 92945e829869a9f585584552fe1403c7b3e91892..f6f37631154e24c00c149fd13c256ff25a51023e 100644 GIT binary patch delta 246 zcmZoz;M%ajb%Hdb*hCp;MzO|()&$1Z1g6#m=GFw3)&$np1h&=$_SOWB)&$Ph1g_Qu z?$!jJ)&$*4 z8cnbB6EI@Se62i5P4m5G zgd;$T8E$yyCZ?x`Wu}&=7UksU7qFBRm8L$MvHt0VWl#4sJe{!q>AqFZ`_@0(J?m-L h3L^s}GhG7{T_Y0(0}CqyBP$~_EJE8;jRa@Q0suKeRjL30 delta 137 zcmV;40CxX?phbY7MUWc-6_Ff60TqE@g3;1BGA&g~54B(rq(25u0=NJTPM7>)4p^5~f)5tAct8*=0s?8Lx28f6 r*9!qWmwrwVGM8+O4+^)sP7q4r0}ujbmj^HrA+sUiJp#97G7*~{*=Q^c diff --git a/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.en-US.md b/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.en-US.md index 648ef4794..5753574cb 100644 --- a/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.en-US.md +++ b/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.en-US.md @@ -15,6 +15,7 @@ image-props | Object | - | `1.12.0`。Typescript: `ImageProps`，[Image API Docu images | Array | [] | Typescript: `Array` | N initial-index | Number | 0 | Typescript: `Number` | N lazy | Boolean | true | `1.9.4` | N +loop | Boolean | true | \- | N show-index | Boolean | false | \- | N using-custom-navbar | Boolean | false | `v1.1.4` | N visible | Boolean | false | hide or show image viewer | N diff --git a/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.md b/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.md index 20e5681e2..d32fbed66 100644 --- a/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.md +++ b/packages/products/tdesign-miniprogram/packages/components/image-viewer/README.md @@ -15,6 +15,7 @@ image-props | Object | - | `1.12.0`。透传至 Image 组件。TS 类型：`Imag images | Array | [] | 图片数组。TS 类型：`Array` | N initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N lazy | Boolean | true | `1.9.4`。是否开启图片懒加载。开启后会预加载当前图片、相邻图片 | N +loop | Boolean | true | 是否开启循环滚动 | N show-index | Boolean | false | 是否显示页码 | N using-custom-navbar | Boolean | false | `v1.1.4`。是否使用了自定义导航栏 | N visible | Boolean | false | 隐藏/显示预览 | N diff --git a/packages/products/tdesign-miniprogram/packages/components/image-viewer/props.ts b/packages/products/tdesign-miniprogram/packages/components/image-viewer/props.ts index c92da65ff..0d6d39d42 100644 --- a/packages/products/tdesign-miniprogram/packages/components/image-viewer/props.ts +++ b/packages/products/tdesign-miniprogram/packages/components/image-viewer/props.ts @@ -40,6 +40,11 @@ const props: TdImageViewerProps = { type: Boolean, value: true, }, + /** 是否开启循环滚动 */ + loop: { + type: Boolean, + value: true, + }, /** 是否显示页码 */ showIndex: { type: Boolean, diff --git a/packages/products/tdesign-miniprogram/packages/components/image-viewer/type.ts b/packages/products/tdesign-miniprogram/packages/components/image-viewer/type.ts index cb8f241ca..4a6797a23 100644 --- a/packages/products/tdesign-miniprogram/packages/components/image-viewer/type.ts +++ b/packages/products/tdesign-miniprogram/packages/components/image-viewer/type.ts @@ -62,6 +62,14 @@ export interface TdImageViewerProps { type: BooleanConstructor; value?: boolean; }; + /** + * 是否开启循环滚动 + * @default true + */ + loop?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 是否显示页码 * @default false diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.en-US.md b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.en-US.md index c8f3e05ab..aaacf6bc7 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.en-US.md +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.en-US.md @@ -14,6 +14,7 @@ image-props | Object | - | Typescript: `ImageProps`，[Image API Documents](./im images | Array | [] | Typescript: `Array` | N initial-index | Number | 0 | Typescript: `Number` | N lazy | Boolean | true | \- | N +loop | Boolean | true | \- | N show-index | Boolean | false | \- | N using-custom-navbar | Boolean | false | \- | N visible | Boolean | false | hide or show image viewer。`v-model:visible` is supported | N diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.md b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.md index 1b26878e2..2f534fce7 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.md +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/README.md @@ -14,6 +14,7 @@ image-props | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[ images | Array | [] | 图片数组。TS 类型：`Array` | N initial-index | Number | 0 | 初始化页码。TS 类型：`Number` | N lazy | Boolean | true | 是否开启图片懒加载。开启后会预加载当前图片、相邻图片 | N +loop | Boolean | true | 是否开启循环滚动 | N show-index | Boolean | false | 是否显示页码 | N using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model:visible` | N diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/props.ts b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/props.ts index 8e5b92592..e69a36bfb 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/props.ts +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/props.ts @@ -40,6 +40,11 @@ export default { type: Boolean, default: true, }, + /** 是否开启循环滚动 */ + loop: { + type: Boolean, + default: true, + }, /** 是否显示页码 */ showIndex: Boolean, /** 是否使用了自定义导航栏 */ diff --git a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/type.ts b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/type.ts index 0481afdf6..fe0a0d958 100644 --- a/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/type.ts +++ b/packages/products/tdesign-miniprogram/packages/uniapp-components/image-viewer/type.ts @@ -41,6 +41,11 @@ export interface TdImageViewerProps { * @default true */ lazy?: boolean; + /** + * 是否开启循环滚动 + * @default true + */ + loop?: boolean; /** * 是否显示页码 * @default false diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts b/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts index 905eefb8d..e73eaa3fd 100644 --- a/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts +++ b/packages/products/tdesign-mobile-react/src/image-viewer/defaultProps.ts @@ -9,6 +9,7 @@ export const imageViewerDefaultProps: TdImageViewerProps = { deleteBtn: false, images: [], defaultIndex: 0, + loop: true, maxZoom: 3, showIndex: false, defaultVisible: false, diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md index 6747094f6..f8b425e22 100644 --- a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md +++ b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.en-US.md @@ -15,6 +15,7 @@ image | TElement | - | `0.21.1`。Typescript: `TNode` `interfac images | Array | [] | Typescript: `Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N index | Number | 0 | \- | N defaultIndex | Number | 0 | uncontrolled property | N +loop | Boolean | true | \- | N maxZoom | Number | 3 | \- | N showIndex | Boolean | false | \- | N visible | Boolean | false | hide or show image viewer | N diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md index 0a7223941..84b9bbab2 100644 --- a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md +++ b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md @@ -15,6 +15,7 @@ image | TElement | - | `0.21.1`。自定义图片内容。TS 类型：`TNode` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N index | Number | 0 | 当前预览图片所在的下标 | N defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N +loop | Boolean | true | 是否开启循环滚动 | N maxZoom | Number | 3 | 【开发中】最大放大比例 | N showIndex | Boolean | false | 是否显示页码 | N visible | Boolean | false | 隐藏/显示预览 | N diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/type.ts b/packages/products/tdesign-mobile-react/src/image-viewer/type.ts index cb61a4d37..3163e2871 100644 --- a/packages/products/tdesign-mobile-react/src/image-viewer/type.ts +++ b/packages/products/tdesign-mobile-react/src/image-viewer/type.ts @@ -41,6 +41,11 @@ export interface TdImageViewerProps { * @default 0 */ defaultIndex?: number; + /** + * 是否开启循环滚动 + * @default true + */ + loop?: boolean; /** * 【开发中】最大放大比例 * @default 3 diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md index 390b15eff..bd8c9948f 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md @@ -13,6 +13,7 @@ image | Slot / Function | - | `1.12.0`。Typescript: `TNode` `i images | Array | [] | Typescript: `Array` `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 +loop | Boolean | true | \- | N maxZoom | Number | 3 | \- | N showIndex | Boolean | false | \- | N visible | Boolean | false | hide or show image viewer。`v-model` and `v-model:visible` is supported | N diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md index 17e96d998..3edbb414e 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md @@ -13,6 +13,7 @@ image | Slot / Function | - | `1.12.0`。自定义图片内容。TS 类型：`TN images | Array | [] | 图片数组。TS 类型：`Array` `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 +loop | Boolean | true | 是否开启循环滚动 | N maxZoom | Number | 3 | 【开发中】最大放大比例 | N showIndex | Boolean | false | 是否显示页码 | N visible | Boolean | false | 隐藏/显示预览。支持语法糖 `v-model` 或 `v-model:visible` | N diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/props.ts b/packages/products/tdesign-mobile-vue/src/image-viewer/props.ts index 8403a53f7..3db5d560f 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/props.ts +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/props.ts @@ -40,6 +40,11 @@ export default { defaultIndex: { type: Number, }, + /** 是否开启循环滚动 */ + loop: { + type: Boolean, + default: true, + }, /** 【开发中】最大放大比例 */ maxZoom: { type: Number, diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts b/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts index ffd7af76a..b0368d633 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts @@ -39,6 +39,11 @@ export interface TdImageViewerProps { * 当前预览图片所在的下标，非受控属性 */ defaultIndex?: number; + /** + * 是否开启循环滚动 + * @default true + */ + loop?: boolean; /** * 【开发中】最大放大比例 * @default 3 diff --git a/packages/scripts/api.json b/packages/scripts/api.json index a657d476e..3927316cf 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -73580,6 +73580,49 @@ "Boolean" ] }, + { + "id": 1777017746, + "platform_framework": [ + "8", + "16", + "64", + "128" + ], + "component": "ImageViewer", + "field_category": 1, + "field_name": "loop", + "field_type": [ + "4" + ], + "field_default_value": "true", + "field_enum": "", + "field_desc_zh": "是否开启循环滚动", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2026-04-24 08:02:26", + "update_time": "2026-04-24 08:02:26", + "event_output": null, + "custom_field_type": null, + "syntactic_sugar": null, + "readonly": 1, + "html_attribute": 0, + "trigger_elements": "", + "deprecated": 0, + "version": "", + "test_description": null, + "support_default_value": 0, + "field_category_text": "Props", + "platform_framework_text": [ + "Vue(Mobile)", + "React(Mobile)", + "Miniprogram", + "UniApp" + ], + "field_type_text": [ + "Boolean" + ] + }, { "id": 2803, "platform_framework": [ From 436b3726442c3f903b1b2a6b8082082f4ff41f3a Mon Sep 17 00:00:00 2001 From: anlyyao Date: Fri, 24 Apr 2026 18:04:38 +0800 Subject: [PATCH 2/2] feat(ImageViewer): enriched image slot parameters --- db/TDesign.db | Bin 1134592 -> 1134592 bytes .../src/image-viewer/image-viewer.en-US.md | 4 ++-- .../src/image-viewer/image-viewer.md | 4 ++-- .../src/image-viewer/type.ts | 3 +++ .../src/image-viewer/image-viewer.en-US.md | 4 ++-- .../src/image-viewer/image-viewer.md | 4 ++-- .../src/image-viewer/type.ts | 3 +++ packages/scripts/api.json | 4 ++-- 8 files changed, 16 insertions(+), 10 deletions(-) diff --git a/db/TDesign.db b/db/TDesign.db index f6f37631154e24c00c149fd13c256ff25a51023e..4ecd4a6f58361ef4fc236189286663d4b39033d0 100644 GIT binary patch delta 507 zcmZoz;M%ajb%Hdb)I=F)MybYx)&$1Z1g6#m=GFw3)&$np1h&=$_SOWB)&$Ph1g_Qu z?$!jJ)&$+WlSQwQ#B^d>IRT(&Vjg1+a_!&4kcsY0(IMO1czDi6#?#-q=-Bg*snbTS! zwW6db(cWsZW0eSB?c;`tjn;EKq*$25nbfE2YVwP>2dnUJ4^|NfmSf^uw0(t>z&~!b z%-80zf-2kB_z8qMs8OI`sFDCho%Ql7TChVQ^VN1oqLLa{2V66xXp?Wj2P=1`4_23vM?!g>I02VhZxNO z^Ek-O3^zP;6Vp?}GE>V_i;{Eli&OpcoO3dhv%$hF&t|NDI$_z;=W^q`!O6-T z#9_qqp6v@;B` `interface ImageSlotParams {src: string; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N -images | Array | [] | Typescript: `Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N +image | TElement | - | `0.21.1`。Typescript: `TNode` `interface ImageSlotParams {src: string; index?: number; extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N +images | Array | [] | Typescript: `Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end'; extra?: Record}`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N index | Number | 0 | \- | N defaultIndex | Number | 0 | uncontrolled property | N loop | Boolean | true | \- | N diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md index 84b9bbab2..029e55138 100644 --- a/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md +++ b/packages/products/tdesign-mobile-react/src/image-viewer/image-viewer.md @@ -11,8 +11,8 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N cover | TElement | - | `0.21.1`。支持自定义覆盖在图片预览最上方的内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N deleteBtn | TNode | false | 是否显示删除操作，前提需要开启页码。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -image | TElement | - | `0.21.1`。自定义图片内容。TS 类型：`TNode` `interface ImageSlotParams {src: string; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N -images | Array | [] | 图片数组。TS 类型：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N +image | TElement | - | `0.21.1`。自定义图片内容。TS 类型：`TNode` `interface ImageSlotParams {src: string; index?: number; extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N +images | Array | [] | 图片数组。TS 类型：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end'; extra?: Record}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/image-viewer/type.ts) | N index | Number | 0 | 当前预览图片所在的下标 | N defaultIndex | Number | 0 | 当前预览图片所在的下标。非受控属性 | N loop | Boolean | true | 是否开启循环滚动 | N diff --git a/packages/products/tdesign-mobile-react/src/image-viewer/type.ts b/packages/products/tdesign-mobile-react/src/image-viewer/type.ts index 3163e2871..1850b3efa 100644 --- a/packages/products/tdesign-mobile-react/src/image-viewer/type.ts +++ b/packages/products/tdesign-mobile-react/src/image-viewer/type.ts @@ -82,6 +82,8 @@ export interface TdImageViewerProps { export interface ImageSlotParams { src: string; + index?: number; + extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; @@ -92,6 +94,7 @@ export interface ImageSlotParams { export interface ImageInfo { url: string; align: 'start' | 'center' | 'end'; + extra?: Record; } export type ImageViewerCloseTrigger = 'image' | 'overlay' | 'close-btn'; diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md index bd8c9948f..bb2bb4135 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.en-US.md @@ -9,8 +9,8 @@ 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 cover | Slot / Function | - | `1.12.0`。Typescript: `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 -image | Slot / Function | - | `1.12.0`。Typescript: `TNode` `interface ImageSlotParams {src: string; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N -images | Array | [] | Typescript: `Array` `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 +image | Slot / Function | - | `1.12.0`。Typescript: `TNode` `interface ImageSlotParams {src: string; index?: number; extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N +images | Array | [] | Typescript: `Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end'; extra?: Record}`。[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 loop | Boolean | true | \- | N diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md index 3edbb414e..2b566d2b4 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/image-viewer.md @@ -9,8 +9,8 @@ closeBtn | Boolean / Slot / Function | true | 是否展示关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 则不显示关闭按钮；也可以完全自定义关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N cover | Slot / Function | - | `1.12.0`。支持自定义覆盖在图片预览最上方的内容。TS 类型：`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 -image | Slot / Function | - | `1.12.0`。自定义图片内容。TS 类型：`TNode` `interface ImageSlotParams {src: string; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N -images | Array | [] | 图片数组。TS 类型：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end' }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N +image | Slot / Function | - | `1.12.0`。自定义图片内容。TS 类型：`TNode` `interface ImageSlotParams {src: string; index?: number; extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} `。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N +images | Array | [] | 图片数组。TS 类型：`Array` `interface ImageInfo { url: string; align: 'start' \| 'center' \| 'end'; extra?: Record}`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/image-viewer/type.ts) | N index | Number | - | 当前预览图片所在的下标。支持语法糖 `v-model:index` | N defaultIndex | Number | - | 当前预览图片所在的下标。非受控属性 | N loop | Boolean | true | 是否开启循环滚动 | N diff --git a/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts b/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts index b0368d633..bf1946be6 100644 --- a/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts +++ b/packages/products/tdesign-mobile-vue/src/image-viewer/type.ts @@ -93,6 +93,8 @@ export interface ImageViewerInstanceFunctions { export interface ImageSlotParams { src: string; + index?: number; + extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; @@ -103,6 +105,7 @@ export interface ImageSlotParams { export interface ImageInfo { url: string; align: 'start' | 'center' | 'end'; + extra?: Record; } export type ImageViewerCloseTrigger = 'image' | 'overlay' | 'close-btn'; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 3927316cf..3cf45ca66 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -73129,7 +73129,7 @@ "create_time": "2025-12-16 18:16:16", "update_time": "2025-12-16 18:16:16", "event_output": null, - "custom_field_type": "TNode【interface ImageSlotParams {src: string; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} 】", + "custom_field_type": "TNode【interface ImageSlotParams {src: string; index?: number; extra?: Record; className?: string; style?: string; onLoad?: (e: Event) => void; onTransitionstart?: (e: TransitionEvent) => void; onTransitionend?: (e: TransitionEvent) => void;} 】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0, @@ -73363,7 +73363,7 @@ "create_time": "2024-05-31 05:07:01", "update_time": "2024-05-31 05:07:01", "event_output": null, - "custom_field_type": "Array【interface ImageInfo { url: string; align: 'start' | 'center' | 'end' }】", + "custom_field_type": "Array【interface ImageInfo { url: string; align: 'start' | 'center' | 'end'; extra?: Record}】", "syntactic_sugar": null, "readonly": 1, "html_attribute": 0,