Skip to content

Commit d40e1b6

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

File tree

18 files changed

+331
-45
lines changed

18 files changed

+331
-45
lines changed

‎db/TDesign.db‎

0 Bytes
Binary file not shown.

‎packages/products/tdesign-mobile-vue/src/swiper/props.ts‎

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

‎packages/products/tdesign-mobile-vue/src/swiper/type.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/* eslint-disable */
2+
3+
/**
4+
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
5+
* */
6+
7+
import { TNode } from '../common';
8+
9+
export interface TdSwiperProps {
10+
/**
11+
* 轮播切换动画效果类型
12+
* @default slide
13+
*/
14+
animation?: 'slide';
15+
/**
16+
* 是否自动播放
17+
* @default true
18+
*/
19+
autoplay?: boolean;
20+
/**
21+
* 当前轮播在哪一项（下标）
22+
* @default 0
23+
*/
24+
current?: number;
25+
/**
26+
* 当前轮播在哪一项（下标），非受控属性
27+
* @default 0
28+
*/
29+
defaultCurrent?: number;
30+
/**
31+
* 当前轮播在哪一项（下标）
32+
* @default 0
33+
*/
34+
modelValue?: number;
35+
/**
36+
* 轮播滑动方向，包括横向滑动和纵向滑动两个方向
37+
* @default horizontal
38+
*/
39+
direction?: 'horizontal' | 'vertical';
40+
/**
41+
* 滑动动画时长
42+
* @default 300
43+
*/
44+
duration?: number;
45+
/**
46+
* 轮播的高度
47+
*/
48+
height?: string | number;
49+
/**
50+
* 轮播间隔时间
51+
* @default 5000
52+
*/
53+
interval?: number;
54+
/**
55+
* 是否循环播放
56+
* @default true
57+
*/
58+
loop?: boolean;
59+
/**
60+
* 导航器全部配置
61+
* @default true
62+
*/
63+
navigation?: SwiperNavigation | TNode | Function | Boolean;
64+
/**
65+
* 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px`
66+
* @default 0
67+
*/
68+
nextMargin?: string | number;
69+
/**
70+
* 【开发中】前边距，可用于露出前一项的一小部分。默认单位 `px`
71+
* @default 0
72+
*/
73+
previousMargin?: string | number;
74+
/**
75+
* 轮播切换时触发
76+
*/
77+
onChange?: (current: number, context: { source: SwiperChangeSource }) => void;
78+
/**
79+
* 点击轮播项时触发
80+
*/
81+
onClick?: (index: number) => void;
82+
}
83+
84+
export interface SwiperNavigation {
85+
/**
86+
* 小于这个数字不会显示导航器
87+
*/
88+
minShowNum?: number;
89+
/**
90+
* 页码信息展示位置
91+
* @default bottom
92+
*/
93+
paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left' | 'right';
94+
/**
95+
* 是否显示两侧的控制按钮
96+
* @default false
97+
*/
98+
showControls?: boolean;
99+
/**
100+
* 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
101+
* @default ''
102+
*/
103+
type?: SwiperNavigationType;
104+
}
105+
106+
export type SwiperChangeSource = 'autoplay' | 'touch' | 'nav';
107+
108+
export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';

‎packages/products/tdesign-react/packages/components/swiper/defaultProps.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const swiperDefaultProps: TdSwiperProps = {
1313
duration: 300,
1414
interval: 5000,
1515
loop: true,
16+
navigation: true,
1617
stopOnHover: true,
1718
theme: 'light',
1819
trigger: 'hover',

‎packages/products/tdesign-react/packages/components/swiper/swiper.en-US.md‎

Lines changed: 4 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
@@ -17,7 +16,7 @@ duration | Number | 300 | \- | N
1716
height | Number | - | \- | N
1817
interval | Number | 5000 | \- | N
1918
loop | Boolean | true | \- | N
20-
navigation | TNode | - | Typescript：`SwiperNavigation \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
19+
navigation | TNode | true | Typescript：`SwiperNavigation \| TNode \| Function \| Boolean `。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2120
stopOnHover | Boolean | true | \- | N
2221
theme | String | light | options: light/dark | N
2322
trigger | String | hover | options: hover/click | N

‎packages/products/tdesign-react/packages/components/swiper/swiper.md‎

Lines changed: 4 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
名称 | 类型 | 默认值 | 描述 | 必传
@@ -17,7 +16,7 @@ duration | Number | 300 | 滑动动画时长 | N
1716
height | Number | - | 当使用垂直方向滚动时的高度 | N
1817
interval | Number | 5000 | 轮播间隔时间 | N
1918
loop | Boolean | true | 是否循环播放 | N
20-
navigation | TNode | - | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
19+
navigation | TNode | true | 导航器全部配置。TS 类型：`SwiperNavigation \| TNode \| Function \| Boolean `。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
2120
stopOnHover | Boolean | true | 是否悬浮时停止轮播 | N
2221
theme | String | light | 深色模式和浅色模式。可选项：light/dark | N
2322
trigger | String | hover | 触发切换的方式：悬浮、点击等。可选项：hover/click | N

‎packages/products/tdesign-react/packages/components/swiper/type.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,9 @@ export interface TdSwiperProps {
5858
loop?: boolean;
5959
/**
6060
* 导航器全部配置
61+
* @default true
6162
*/
62-
navigation?: SwiperNavigation | TNode;
63+
navigation?: SwiperNavigation | TNode | Function | Boolean;
6364
/**
6465
* 是否悬浮时停止轮播
6566
* @default true

‎packages/products/tdesign-vue-next/packages/components/swiper/props.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,8 @@ export default {
7070
},
7171
/** 导航器全部配置 */
7272
navigation: {
73-
type: [Object, Function] as PropType<TdSwiperProps['navigation']>,
73+
type: [Boolean, Object, Function, Function] as PropType<TdSwiperProps['navigation']>,
74+
default: true as TdSwiperProps['navigation'],
7475
},
7576
/** 是否悬浮时停止轮播 */
7677
stopOnHover: {

0 commit comments

Comments
 (0)