feat(tabs): support swipeable

Tencent · Jul 19, 2022 · f058b1f · f058b1f
1 parent 91e86c9
commit f058b1f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 14 deletions.
diff --git 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
@@ -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
@@ -16,18 +16,18 @@ const props: TdTabPanelProps = {
     type: Boolean,
     value: false,
   },
-  /** 选项卡名称，可自定义选项卡导航内容 */
+  /** 选项卡名称 */
   label: {
     type: String,
+    value: '',
   },
   /** 用于自定义选项卡面板内容 */
   panel: {
     type: String,
   },
   /** 选项卡的值，唯一标识 */
   value: {
-    type: String,
-    optionalTypes: [Number],
+    type: null,
   },
 };
 

diff --git 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
@@ -35,20 +35,26 @@ export interface TdTabsProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 是否可以滑动切换
+   * @default true
+   */
+  swipeable?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 激活的选项卡值
    */
   value?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor>;
+    type: null;
     value?: TabValue;
   };
   /**
    * 激活的选项卡值，非受控属性
    */
   defaultValue?: {
-    type: StringConstructor;
-    optionalTypes: Array<NumberConstructor>;
+    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<NumberConstructor>;
+    type: null;
     value?: TabValue;
   };
 }