fix(Tabs): enable hidden on the beginning (#3132)

* fix(Tabs): enable hidden on the beginning * docs(tabs): update
Tencent · Sep 10, 2024 · 1c0429a · 1c0429a
1 parent abe1f53
commit 1c0429a
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 18 deletions.
diff --git a/src/common/wechat.ts b/src/common/wechat.ts
@@ -1,6 +1,7 @@
 export const getObserver = (context, selector: string) => {
   return new Promise((resolve, reject) => {
-    wx.createIntersectionObserver(context)
+    context
+      .createIntersectionObserver(context)
       .relativeToViewport()
       .observe(selector, (res) => {
         resolve(res);

diff --git a/src/tab-panel/props.ts b/src/tab-panel/props.ts
@@ -10,11 +10,6 @@ const props: TdTabPanelProps = {
   badgeProps: {
     type: Object,
   },
-  /** 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 */
-  destroyOnHide: {
-    type: Boolean,
-    value: true,
-  },
   /** 是否禁用当前选项卡 */
   disabled: {
     type: Boolean,

diff --git a/src/tab-panel/type.ts b/src/tab-panel/type.ts
@@ -14,14 +14,6 @@ export interface TdTabPanelProps {
     type: ObjectConstructor;
     value?: object;
   };
-  /**
-   * 【实现有误，暂不支持】选项卡内容隐藏时是否销毁
-   * @default true
-   */
-  destroyOnHide?: {
-    type: BooleanConstructor;
-    value?: boolean;
-  };
   /**
    * 是否禁用当前选项卡
    * @default false

diff --git a/src/tabs/README.en-US.md b/src/tabs/README.en-US.md
@@ -45,7 +45,6 @@ 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
 badge-props | Object | - | \- | N
-destroy-on-hide | Boolean | true | \- | N
 disabled | Boolean | false | \- | N
 icon | String / Object | - | \- | N
 label | String | - | \- | N
@@ -73,4 +72,4 @@ Name | Default Value | Description
 --td-tab-track-color | @brand-color | - 
 --td-tab-track-radius | 8rpx | - 
 --td-tab-track-thickness | 6rpx | - 
---td-tab-track-width | 32rpx | -
+--td-tab-track-width | 32rpx | -
diff --git a/src/tabs/README.md b/src/tabs/README.md
@@ -158,7 +158,6 @@ t-class-track | 滚动条样式类
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 badge-props | Object | - | 透传至 Badge 组件 | N
-destroy-on-hide | Boolean | true | 【实现有误，暂不支持】选项卡内容隐藏时是否销毁 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
 icon | String / Object | - | `1.0.0-rc.1`。图标，传对象则透传至 Icon | N
 label | String | - | 选项卡名称 | N
@@ -186,4 +185,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
 --td-tab-track-color | @brand-color | - 
 --td-tab-track-radius | 8rpx | - 
 --td-tab-track-thickness | 6rpx | - 
---td-tab-track-width | 32rpx | -
+--td-tab-track-width | 32rpx | -
diff --git a/src/tabs/tabs.ts b/src/tabs/tabs.ts
@@ -4,6 +4,7 @@ import config from '../common/config';
 import touch from '../mixins/touch';
 import { getRect, uniqueFactory } from '../common/utils';
 import { TdTabsProps } from './type';
+import { getObserver } from '../common/wechat';
 
 const { prefix } = config;
 const name = `${prefix}-tabs`;
@@ -215,6 +216,9 @@ export default class Tabs extends SuperComponent {
           this.setData({
             offset: Math.min(Math.max(offset, 0), maxOffset),
           });
+        } else if (!this._hasObserved) {
+          this._hasObserved = true;
+          getObserver(this, `.${name}`).then(() => this.setTrack());
         }
 
         if (this.data.theme === 'line') {