Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(image-viewer): sync api #1637

Merged
merged 3 commits into from
Nov 19, 2024
Merged

docs(image-viewer): sync api #1637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6c1387d
fix(image-viewer): fix ts type
liweijie0812 Nov 11, 2024
b599c56
docs: sync api
liweijie0812 Nov 11, 2024
3005cb8
fix: onIndexChange trigger
liweijie0812 Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/image-viewer/image-viewer-interface.ts
View file
Open in desktop

This file was deleted.

14 changes: 7 additions & 7 deletions src/image-viewer/image-viewer.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
-- | -- | --
Expand All @@ -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 | -
14 changes: 7 additions & 7 deletions src/image-viewer/image-viewer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
Expand All @@ -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 | -
23 changes: 8 additions & 15 deletions src/image-viewer/image-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -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')} />
Expand Down Expand Up @@ -455,7 +448,7 @@ export default defineComponent({
</div>
</div>
)}
</transition>
</Transition>
);
},
});
11 changes: 8 additions & 3 deletions src/image-viewer/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export interface TdImageViewerProps {
* 图片数组
* @default []
*/
images?: Array<string | { url: string; align: 'start' | 'center' | 'end' }>;
images?: Array<string | ImageInfo>;
/**
* 当前预览图片所在的下标
*/
Expand Down Expand Up @@ -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';
}
Loading