diff --git a/src/tabs/README.md b/src/tabs/README.md index d9e6d6490..e76d970e5 100644 --- a/src/tabs/README.md +++ b/src/tabs/README.md @@ -127,6 +127,7 @@ animation | Object | - | 动画效果设置。其中 duration 表示动画时长 external-classes | Array | - | 组件类名,分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N placement | String | top | 选项卡位置。可选项:left/top | N show-bottom-line | Boolean | true | 是否展示底部激活线条 | N +swipeable | Boolean | true | 是否可以滑动切换 | N value | String / Number | - | 激活的选项卡值。TS 类型:`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N default-value | String / Number | undefined | 激活的选项卡值。非受控属性。TS 类型:`TabValue` `type TabValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N diff --git a/src/tabs/props.ts b/src/tabs/props.ts index e241d2aac..f4eb1a7f7 100644 --- a/src/tabs/props.ts +++ b/src/tabs/props.ts @@ -24,16 +24,19 @@ const props: TdTabsProps = { type: Boolean, value: true, }, + /** 是否可以滑动切换 */ + swipeable: { + type: Boolean, + value: true, + }, /** 激活的选项卡值 */ value: { - type: String, - optionalTypes: [Number], + type: null, value: null, }, /** 激活的选项卡值,非受控属性 */ defaultValue: { - type: String, - optionalTypes: [Number], + type: null, }, }; diff --git a/src/tabs/tab-panel-props.ts b/src/tabs/tab-panel-props.ts index 3555f4946..b95b97160 100644 --- a/src/tabs/tab-panel-props.ts +++ b/src/tabs/tab-panel-props.ts @@ -16,9 +16,10 @@ const props: TdTabPanelProps = { type: Boolean, value: false, }, - /** 选项卡名称,可自定义选项卡导航内容 */ + /** 选项卡名称 */ label: { type: String, + value: '', }, /** 用于自定义选项卡面板内容 */ panel: { @@ -26,8 +27,7 @@ const props: TdTabPanelProps = { }, /** 选项卡的值,唯一标识 */ value: { - type: String, - optionalTypes: [Number], + type: null, }, }; diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts index ac82a521b..a03769428 100644 --- a/src/tabs/tabs.ts +++ b/src/tabs/tabs.ts @@ -213,14 +213,20 @@ export default class Tabs extends SuperComponent { } onTouchStart(event: any) { + if (!this.properties.swipeable) return; + this.touchStart(event); } onTouchMove(event: any) { + if (!this.properties.swipeable) return; + this.touchMove(event); } onTouchEnd() { + if (!this.properties.swipeable) return; + const { direction, deltaX, offsetX } = this; const minSwipeDistance = 50; if (direction === 'horizontal' && offsetX >= minSwipeDistance) { diff --git a/src/tabs/type.ts b/src/tabs/type.ts index 99cd57b3e..ac57c628b 100644 --- a/src/tabs/type.ts +++ b/src/tabs/type.ts @@ -35,20 +35,26 @@ export interface TdTabsProps { type: BooleanConstructor; value?: boolean; }; + /** + * 是否可以滑动切换 + * @default true + */ + swipeable?: { + type: BooleanConstructor; + value?: boolean; + }; /** * 激活的选项卡值 */ value?: { - type: StringConstructor; - optionalTypes: Array; + type: null; value?: TabValue; }; /** * 激活的选项卡值,非受控属性 */ defaultValue?: { - type: StringConstructor; - optionalTypes: Array; + type: null; value?: TabValue; }; } @@ -71,7 +77,8 @@ export interface TdTabPanelProps { value?: boolean; }; /** - * 选项卡名称,可自定义选项卡导航内容 + * 选项卡名称 + * @default '' */ label?: { type: StringConstructor; @@ -88,8 +95,7 @@ export interface TdTabPanelProps { * 选项卡的值,唯一标识 */ value?: { - type: StringConstructor; - optionalTypes: Array; + type: null; value?: TabValue; }; }