Skip to content

Commit ca15fd7

Browse files
committed
feat(Swiper): add Boolean type support for navigation
1 parent b0e1520 commit ca15fd7

File tree

22 files changed

+783
-497
lines changed

22 files changed

+783
-497
lines changed

db/TDesign.db

0 Bytes
Binary file not shown.

packages/products/tdesign-mobile-vue/src/common.ts

Lines changed: 95 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -40,98 +40,98 @@ export interface UploadDisplayDragEvents {
4040
}
4141

4242
export type ImageEvent = Event;
43-
44-
/**
45-
* 通用全局类型
46-
* */
47-
export type PlainObject = { [key: string]: any };
48-
49-
export type OptionData = {
50-
label?: string;
51-
value?: string | number;
52-
} & PlainObject;
53-
54-
export type TreeOptionData<T = string | number> = {
55-
children?: Array<TreeOptionData<T>> | boolean;
56-
/** option label content */
57-
label?: string | TNode;
58-
/** option search text */
59-
text?: string;
60-
/** option value */
61-
value?: T;
62-
/** option node content */
63-
content?: string | TNode;
64-
} & PlainObject;
65-
66-
export type SizeEnum = 'small' | 'medium' | 'large';
67-
68-
export type ShapeEnum = 'circle' | 'round';
69-
70-
export type HorizontalAlignEnum = 'left' | 'center' | 'right';
71-
72-
export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
73-
74-
export type LayoutEnum = 'vertical' | 'horizontal';
75-
76-
export type ClassName = { [className: string]: any } | ClassName[] | string;
77-
78-
export type CSSSelector = string;
79-
80-
export interface KeysType {
81-
value?: string;
82-
label?: string;
83-
disabled?: string;
84-
}
85-
86-
export interface TreeKeysType extends KeysType {
87-
children?: string;
88-
}
89-
90-
export interface HTMLElementAttributes {
91-
[attribute: string]: string;
92-
}
93-
94-
export interface TScroll {
95-
/**
96-
* 表示除可视区域外,额外渲染的行数,避免快速滚动过程中,新出现的内容来不及渲染从而出现空白
97-
* @default 20
98-
*/
99-
bufferSize?: number;
100-
/**
101-
* 表示每行内容是否同一个固定高度,仅在 `scroll.type` 为 `virtual` 时有效,该属性设置为 `true` 时,可用于简化虚拟滚动内部计算逻辑,提升性能,此时则需要明确指定 `scroll.rowHeight` 属性的值
102-
* @default false
103-
*/
104-
isFixedRowHeight?: boolean;
105-
/**
106-
* 行高,不会给元素添加样式高度,仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置,可尽量将该属性设置为每行平均高度,从而使得滚动过程更加平滑
107-
*/
108-
rowHeight?: number;
109-
/**
110-
* 启动虚拟滚动的阈值。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动
111-
* @default 100
112-
*/
113-
threshold?: number;
114-
/**
115-
* 滚动加载类型,有两种:懒加载和虚拟滚动。<br />值为 `lazy` ,表示滚动时会进行懒加载,非可视区域内的内容将不会默认渲染,直到该内容可见时,才会进行渲染,并且已渲染的内容滚动到不可见时,不会被销毁;<br />值为`virtual`时,表示会进行虚拟滚动,无论滚动条滚动到哪个位置,同一时刻,仅渲染该可视区域内的内容,当需要展示的数据量较大时,建议开启该特性
116-
*/
117-
type: 'lazy' | 'virtual';
118-
}
119-
120-
/**
121-
* @deprecated use TScroll instead
122-
*/
123-
export type InfinityScroll = TScroll;
124-
125-
export interface ScrollToElementParams {
126-
/** 跳转元素下标 */
127-
index?: number;
128-
/** 跳转元素距离顶部的距离 */
129-
top?: number;
130-
/** 单个元素高度非固定场景下,即 isFixedRowHeight = false。延迟设置元素位置,一般用于依赖不同高度异步渲染等场景,单位:毫秒 */
131-
time?: number;
132-
behavior?: 'auto' | 'smooth';
133-
}
134-
135-
export interface ComponentScrollToElementParams extends ScrollToElementParams {
136-
key?: string | number;
137-
}
43+
44+
/**
45+
* 通用全局类型
46+
* */
47+
export type PlainObject = { [key: string]: any };
48+
49+
export type OptionData = {
50+
label?: string;
51+
value?: string | number;
52+
} & PlainObject;
53+
54+
export type TreeOptionData<T = string | number> = {
55+
children?: Array<TreeOptionData<T>> | boolean;
56+
/** option label content */
57+
label?: string | TNode;
58+
/** option search text */
59+
text?: string;
60+
/** option value */
61+
value?: T;
62+
/** option node content */
63+
content?: string | TNode;
64+
} & PlainObject;
65+
66+
export type SizeEnum = 'small' | 'medium' | 'large';
67+
68+
export type ShapeEnum = 'circle' | 'round';
69+
70+
export type HorizontalAlignEnum = 'left' | 'center' | 'right';
71+
72+
export type VerticalAlignEnum = 'top' | 'middle' | 'bottom';
73+
74+
export type LayoutEnum = 'vertical' | 'horizontal';
75+
76+
export type ClassName = { [className: string]: any } | ClassName[] | string;
77+
78+
export type CSSSelector = string;
79+
80+
export interface KeysType {
81+
value?: string;
82+
label?: string;
83+
disabled?: string;
84+
}
85+
86+
export interface TreeKeysType extends KeysType {
87+
children?: string;
88+
}
89+
90+
export interface HTMLElementAttributes {
91+
[attribute: string]: string;
92+
}
93+
94+
export interface TScroll {
95+
/**
96+
* 表示除可视区域外,额外渲染的行数,避免快速滚动过程中,新出现的内容来不及渲染从而出现空白
97+
* @default 20
98+
*/
99+
bufferSize?: number;
100+
/**
101+
* 表示每行内容是否同一个固定高度,仅在 `scroll.type` 为 `virtual` 时有效,该属性设置为 `true` 时,可用于简化虚拟滚动内部计算逻辑,提升性能,此时则需要明确指定 `scroll.rowHeight` 属性的值
102+
* @default false
103+
*/
104+
isFixedRowHeight?: boolean;
105+
/**
106+
* 行高,不会给元素添加样式高度,仅作为滚动时的行高参考。一般情况不需要设置该属性。如果设置,可尽量将该属性设置为每行平均高度,从而使得滚动过程更加平滑
107+
*/
108+
rowHeight?: number;
109+
/**
110+
* 启动虚拟滚动的阈值。为保证组件收益最大化,当数据量小于阈值 `scroll.threshold` 时,无论虚拟滚动的配置是否存在,组件内部都不会开启虚拟滚动
111+
* @default 100
112+
*/
113+
threshold?: number;
114+
/**
115+
* 滚动加载类型,有两种:懒加载和虚拟滚动。<br />值为 `lazy` ,表示滚动时会进行懒加载,非可视区域内的内容将不会默认渲染,直到该内容可见时,才会进行渲染,并且已渲染的内容滚动到不可见时,不会被销毁;<br />值为`virtual`时,表示会进行虚拟滚动,无论滚动条滚动到哪个位置,同一时刻,仅渲染该可视区域内的内容,当需要展示的数据量较大时,建议开启该特性
116+
*/
117+
type: 'lazy' | 'virtual';
118+
}
119+
120+
/**
121+
* @deprecated use TScroll instead
122+
*/
123+
export type InfinityScroll = TScroll;
124+
125+
export interface ScrollToElementParams {
126+
/** 跳转元素下标 */
127+
index?: number;
128+
/** 跳转元素距离顶部的距离 */
129+
top?: number;
130+
/** 单个元素高度非固定场景下,即 isFixedRowHeight = false。延迟设置元素位置,一般用于依赖不同高度异步渲染等场景,单位:毫秒 */
131+
time?: number;
132+
behavior?: 'auto' | 'smooth';
133+
}
134+
135+
export interface ComponentScrollToElementParams extends ScrollToElementParams {
136+
key?: string | number;
137+
}
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { TdSwiperProps } from './type';
8+
import { PropType } from 'vue';
9+
10+
export default {
11+
/** 轮播切换动画效果类型 */
12+
animation: {
13+
type: String as PropType<TdSwiperProps['animation']>,
14+
default: 'slide' as TdSwiperProps['animation'],
15+
validator(val: TdSwiperProps['animation']): boolean {
16+
if (!val) return true;
17+
return ['slide'].includes(val);
18+
},
19+
},
20+
/** 是否自动播放 */
21+
autoplay: {
22+
type: Boolean,
23+
default: true,
24+
},
25+
/** 当前轮播在哪一项(下标) */
26+
current: {
27+
type: Number,
28+
default: undefined,
29+
},
30+
modelValue: {
31+
type: Number,
32+
default: undefined,
33+
},
34+
/** 当前轮播在哪一项(下标),非受控属性 */
35+
defaultCurrent: {
36+
type: Number,
37+
default: 0,
38+
},
39+
/** 轮播滑动方向,包括横向滑动和纵向滑动两个方向 */
40+
direction: {
41+
type: String as PropType<TdSwiperProps['direction']>,
42+
default: 'horizontal' as TdSwiperProps['direction'],
43+
validator(val: TdSwiperProps['direction']): boolean {
44+
if (!val) return true;
45+
return ['horizontal', 'vertical'].includes(val);
46+
},
47+
},
48+
/** 滑动动画时长 */
49+
duration: {
50+
type: Number,
51+
default: 300,
52+
},
53+
/** 轮播的高度 */
54+
height: {
55+
type: [String, Number] as PropType<TdSwiperProps['height']>,
56+
},
57+
/** 轮播间隔时间 */
58+
interval: {
59+
type: Number,
60+
default: 5000,
61+
},
62+
/** 是否循环播放 */
63+
loop: {
64+
type: Boolean,
65+
default: true,
66+
},
67+
/** 导航器全部配置 */
68+
navigation: {
69+
type: [Boolean, Object, Function, Function] as PropType<TdSwiperProps['navigation']>,
70+
default: true as TdSwiperProps['navigation'],
71+
},
72+
/** 【开发中】后边距,可用于露出后一项的一小部分。默认单位 `px` */
73+
nextMargin: {
74+
type: [String, Number] as PropType<TdSwiperProps['nextMargin']>,
75+
default: 0 as TdSwiperProps['nextMargin'],
76+
},
77+
/** 【开发中】前边距,可用于露出前一项的一小部分。默认单位 `px` */
78+
previousMargin: {
79+
type: [String, Number] as PropType<TdSwiperProps['previousMargin']>,
80+
default: 0 as TdSwiperProps['previousMargin'],
81+
},
82+
/** 轮播切换时触发 */
83+
onChange: Function as PropType<TdSwiperProps['onChange']>,
84+
/** 点击轮播项时触发 */
85+
onClick: Function as PropType<TdSwiperProps['onClick']>,
86+
};

packages/products/tdesign-mobile-vue/src/swiper/swiper.en-US.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
:: BASE_DOC ::
2-
3-
## API
4-
1+
:: BASE_DOC ::
2+
3+
## API
54
### Swiper Props
65

76
name | type | default | description | required
@@ -14,7 +13,7 @@ duration | Number | 300 | \- | N
1413
height | String / Number | - | \- | N
1514
interval | Number | 5000 | \- | N
1615
loop | Boolean | true | \- | N
17-
navigation | Object / Slot / Function | - | Typescript:`SwiperNavigation \| TNode`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
16+
navigation | Boolean / Object / Function / Slot / Function | true | Typescript:`SwiperNavigation \| TNode \| Function \| Boolean `[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
1817
nextMargin | String / Number | 0 | \- | N
1918
previousMargin | String / Number | 0 | \- | N
2019
onChange | Function | | Typescript:`(current: number, context: { source: SwiperChangeSource }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
@@ -26,3 +25,12 @@ name | params | description
2625
-- | -- | --
2726
change | `(current: number, context: { source: SwiperChangeSource })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
2827
click | `(index: number)` | \-
28+
29+
### SwiperNavigation
30+
31+
name | type | default | description | required
32+
-- | -- | -- | -- | --
33+
minShowNum | Number | - | \- | N
34+
paginationPosition | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
35+
showControls | Boolean | false | \- | N
36+
type | String | - | Typescript:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N

packages/products/tdesign-mobile-vue/src/swiper/swiper.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
:: BASE_DOC ::
2-
3-
## API
4-
1+
:: BASE_DOC ::
2+
3+
## API
54
### Swiper Props
65

76
名称 | 类型 | 默认值 | 描述 | 必传
@@ -14,7 +13,7 @@ duration | Number | 300 | 滑动动画时长 | N
1413
height | String / Number | - | 轮播的高度 | N
1514
interval | Number | 5000 | 轮播间隔时间 | N
1615
loop | Boolean | true | 是否循环播放 | N
17-
navigation | Object / Slot / Function | - | 导航器全部配置。TS 类型:`SwiperNavigation \| TNode`[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
16+
navigation | Boolean / Object / Function / Slot / Function | true | 导航器全部配置。TS 类型:`SwiperNavigation \| TNode \| Function \| Boolean `[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
1817
nextMargin | String / Number | 0 | 【开发中】后边距,可用于露出后一项的一小部分。默认单位 `px` | N
1918
previousMargin | String / Number | 0 | 【开发中】前边距,可用于露出前一项的一小部分。默认单位 `px` | N
2019
onChange | Function | | TS 类型:`(current: number, context: { source: SwiperChangeSource }) => void`<br/>轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/> | N
@@ -26,3 +25,12 @@ onClick | Function | | TS 类型:`(index: number) => void`<br/>点击轮播
2625
-- | -- | --
2726
change | `(current: number, context: { source: SwiperChangeSource })` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' \| 'touch' \| 'nav'`<br/>
2827
click | `(index: number)` | 点击轮播项时触发
28+
29+
### SwiperNavigation
30+
31+
名称 | 类型 | 默认值 | 描述 | 必传
32+
-- | -- | -- | -- | --
33+
minShowNum | Number | - | 小于这个数字不会显示导航器 | N
34+
paginationPosition | String | bottom | 页码信息展示位置。可选项:top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
35+
showControls | Boolean | false | 是否显示两侧的控制按钮 | N
36+
type | String | - | 导航器类型,点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型:`SwiperNavigationType` `type SwiperNavigationType = 'dots' \| 'dots-bar' \| 'fraction'`[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swiper/type.ts) | N

0 commit comments

Comments
 (0)