Skip to content

Commit 9b52e6c

Browse files
RSS1102RSS1102
authored
feat(Swiper): support defaultCurrent (#747)
* feat(Swiper): support `defaultCurrent` * feat(Swiper): 支持 `defaultCurrent` 非受控属性
1 parent 2cab5ca commit 9b52e6c

File tree

16 files changed

+223
-7
lines changed

16 files changed

+223
-7
lines changed

‎db/TDesign.db‎

0 Bytes
Binary file not shown.

‎packages/products/tdesign-mobile-react/src/swiper/defaultProps.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { TdSwiperProps } from './type';
77
export const swiperDefaultProps: TdSwiperProps = {
88
animation: 'slide',
99
autoplay: true,
10-
current: 0,
10+
defaultCurrent: 0,
1111
direction: 'horizontal',
1212
duration: 300,
1313
interval: 5000,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper
1111
animation | String | slide | options: slide | N
1212
autoplay | Boolean | true | \- | N
1313
current | Number | 0 | \- | N
14+
defaultCurrent | Number | 0 | uncontrolled property | N
1415
direction | String | horizontal | options: horizontal/vertical | N
1516
duration | Number | 300 | \- | N
1617
height | String / Number | - | \- | N

‎packages/products/tdesign-mobile-react/src/swiper/swiper.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
1111
animation | String | slide | 轮播切换动画效果类型。可选项：slide | N
1212
autoplay | Boolean | true | 是否自动播放 | N
1313
current | Number | 0 | 当前轮播在哪一项（下标） | N
14+
defaultCurrent | Number | 0 | 当前轮播在哪一项（下标）。非受控属性 | N
1415
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
1516
duration | Number | 300 | 滑动动画时长 | N
1617
height | String / Number | - | 当使用垂直方向滚动时的高度 | N

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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: [Object, Function] as PropType<TdSwiperProps['navigation']>,
70+
},
71+
/** 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px` */
72+
nextMargin: {
73+
type: [String, Number] as PropType<TdSwiperProps['nextMargin']>,
74+
default: 0 as TdSwiperProps['nextMargin'],
75+
},
76+
/** 【开发中】前边距，可用于露出前一项的一小部分。默认单位 `px` */
77+
previousMargin: {
78+
type: [String, Number] as PropType<TdSwiperProps['previousMargin']>,
79+
default: 0 as TdSwiperProps['previousMargin'],
80+
},
81+
/** 轮播切换时触发 */
82+
onChange: Function as PropType<TdSwiperProps['onChange']>,
83+
/** 点击轮播项时触发 */
84+
onClick: Function as PropType<TdSwiperProps['onClick']>,
85+
};

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ name | type | default | description | required
99
animation | String | slide | options: slide | N
1010
autoplay | Boolean | true | \- | N
1111
current | Number | 0 | `v-model` and `v-model:current` is supported | N
12+
defaultCurrent | Number | 0 | uncontrolled property | N
1213
direction | String | horizontal | options: horizontal/vertical | N
1314
duration | Number | 300 | \- | N
1415
height | String / Number | - | \- | N
@@ -26,3 +27,12 @@ name | params | description
2627
-- | -- | --
2728
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/>
2829
click | `(index: number)` | \-
30+
31+
### SwiperNavigation
32+
33+
name | type | default | description | required
34+
-- | -- | -- | -- | --
35+
minShowNum | Number | - | \- | N
36+
paginationPosition | String | bottom | options: top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
37+
showControls | Boolean | false | \- | N
38+
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: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
animation | String | slide | 轮播切换动画效果类型。可选项：slide | N
1010
autoplay | Boolean | true | 是否自动播放 | N
1111
current | Number | 0 | 当前轮播在哪一项（下标）。支持语法糖 `v-model` 或 `v-model:current` | N
12+
defaultCurrent | Number | 0 | 当前轮播在哪一项（下标）。非受控属性 | N
1213
direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
1314
duration | Number | 300 | 滑动动画时长 | N
1415
height | String / Number | - | 轮播的高度 | N
@@ -26,3 +27,12 @@ onClick | Function | | TS 类型：`(index: number) => void`<br/>点击轮播
2627
-- | -- | --
2728
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/>
2829
click | `(index: number)` | 点击轮播项时触发
30+
31+
### SwiperNavigation
32+
33+
名称 | 类型 | 默认值 | 描述 | 必传
34+
-- | -- | -- | -- | --
35+
minShowNum | Number | - | 小于这个数字不会显示导航器 | N
36+
paginationPosition | String | bottom | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right/left/right | N
37+
showControls | Boolean | false | 是否显示两侧的控制按钮 | N
38+
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: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
*/
62+
navigation?: SwiperNavigation | TNode;
63+
/**
64+
* 【开发中】后边距，可用于露出后一项的一小部分。默认单位 `px`
65+
* @default 0
66+
*/
67+
nextMargin?: string | number;
68+
/**
69+
* 【开发中】前边距，可用于露出前一项的一小部分。默认单位 `px`
70+
* @default 0
71+
*/
72+
previousMargin?: string | number;
73+
/**
74+
* 轮播切换时触发
75+
*/
76+
onChange?: (current: number, context: { source: SwiperChangeSource }) => void;
77+
/**
78+
* 点击轮播项时触发
79+
*/
80+
onClick?: (index: number) => void;
81+
}
82+
83+
export interface SwiperNavigation {
84+
/**
85+
* 小于这个数字不会显示导航器
86+
*/
87+
minShowNum?: number;
88+
/**
89+
* 页码信息展示位置
90+
* @default bottom
91+
*/
92+
paginationPosition?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'left' | 'right';
93+
/**
94+
* 是否显示两侧的控制按钮
95+
* @default false
96+
*/
97+
showControls?: boolean;
98+
/**
99+
* 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
100+
* @default ''
101+
*/
102+
type?: SwiperNavigationType;
103+
}
104+
105+
export type SwiperChangeSource = 'autoplay' | 'touch' | 'nav';
106+
107+
export type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const swiperDefaultProps: TdSwiperProps = {
88
animation: 'slide',
99
autoplay: true,
1010
cardScale: '210/332',
11-
current: 0,
11+
defaultCurrent: 0,
1212
direction: 'horizontal',
1313
duration: 300,
1414
interval: 5000,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ animation | String | slide | options: slide/fade | N
1212
autoplay | Boolean | true | \- | N
1313
cardScale | Number | 210/332 | \- | N
1414
current | Number | 0 | \- | N
15+
defaultCurrent | Number | 0 | uncontrolled property | N
1516
direction | String | horizontal | options: horizontal/vertical | N
1617
duration | Number | 300 | \- | N
1718
height | Number | - | \- | N

0 commit comments

Comments
 (0)