feat: tabs 新增 bottomLineMode；TabPanel 新增 lazy 属性

TDesignOteam · Jan 3, 2025 · deb487e · deb487e
1 parent e554037
commit deb487e
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 0 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-miniprogram/src/tab-panel/props.ts b/packages/products/tdesign-miniprogram/src/tab-panel/props.ts
@@ -24,6 +24,11 @@ const props: TdTabPanelProps = {
     type: String,
     value: '',
   },
+  /** 是否启用选项卡懒加载 */
+  lazy: {
+    type: Boolean,
+    value: false,
+  },
   /** 用于自定义选项卡面板内容 */
   panel: {
     type: String,

diff --git a/packages/products/tdesign-miniprogram/src/tab-panel/type.ts b/packages/products/tdesign-miniprogram/src/tab-panel/type.ts
@@ -37,6 +37,14 @@ export interface TdTabPanelProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否启用选项卡懒加载
+   * @default false
+   */
+  lazy?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 用于自定义选项卡面板内容
    */

diff --git a/packages/products/tdesign-miniprogram/src/tabs/README.en-US.md b/packages/products/tdesign-miniprogram/src/tabs/README.en-US.md
@@ -9,6 +9,7 @@ name | type | default | description | required
 style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+bottom-line-mode | String | fixed | options: fixed/auto/full | N
 middle | Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | \- | N
 space-evenly | Boolean | true | \- | N
@@ -49,5 +50,6 @@ badge-props | Object | - | \- | N
 disabled | Boolean | false | \- | N
 icon | String / Object | - | \- | N
 label | String | - | \- | N
+lazy | Boolean | false | Enable tab lazy loading | N
 panel | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | Typescript：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
diff --git a/packages/products/tdesign-miniprogram/src/tabs/README.md b/packages/products/tdesign-miniprogram/src/tabs/README.md
@@ -9,6 +9,7 @@
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。（单位：秒）。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
+bottom-line-mode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
 middle | Slot | - | 中间内容，介于头部和内容之间。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
 space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
@@ -49,5 +50,6 @@ badge-props | Object | - | 透传至 Badge 组件 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
 icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 选项卡名称 | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | String / Slot | - | 用于自定义选项卡面板内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue`，[Tabs API Documents](./tabs?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-panel/type.ts) | N
diff --git a/packages/products/tdesign-miniprogram/src/tabs/props.ts b/packages/products/tdesign-miniprogram/src/tabs/props.ts
@@ -10,6 +10,11 @@ const props: TdTabsProps = {
   animation: {
     type: Object,
   },
+  /** 激活下划线的模式 */
+  bottomLineMode: {
+    type: String,
+    value: 'fixed',
+  },
   /** 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名 */
   externalClasses: {
     type: Array,

diff --git a/packages/products/tdesign-miniprogram/src/tabs/type.ts b/packages/products/tdesign-miniprogram/src/tabs/type.ts
@@ -14,6 +14,14 @@ export interface TdTabsProps {
     type: ObjectConstructor;
     value?: TabAnimation;
   };
+  /**
+   * 激活下划线的模式
+   * @default fixed
+   */
+  bottomLineMode?: {
+    type: StringConstructor;
+    value?: 'fixed' | 'auto' | 'full';
+  };
   /**
    * 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名
    */

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -112795,6 +112795,43 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1735887548,
+      "platform_framework": [
+        "64"
+      ],
+      "component": "TabPanel",
+      "field_category": 1,
+      "field_name": "lazy",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "false",
+      "field_enum": "",
+      "field_desc_zh": "是否启用选项卡懒加载",
+      "field_desc_en": "Enable tab lazy loading",
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-01-03 06:59:08",
+      "update_time": "2025-01-03 06:59:08",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
     {
       "id": 737,
       "platform_framework": [
@@ -116108,6 +116145,43 @@
         "String"
       ]
     },
+    {
+      "id": 1735887521,
+      "platform_framework": [
+        "64"
+      ],
+      "component": "Tabs",
+      "field_category": 1,
+      "field_name": "bottomLineMode",
+      "field_type": [
+        "1"
+      ],
+      "field_default_value": "fixed",
+      "field_enum": "fixed/auto/full",
+      "field_desc_zh": "激活下划线的模式",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-01-03 06:58:41",
+      "update_time": "2025-01-03 06:58:41",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Miniprogram"
+      ],
+      "field_type_text": [
+        "String"
+      ]
+    },
     {
       "id": 1726036563,
       "platform_framework": [