diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
index ecbf915d6..eba0a81a5 100644
--- a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
@@ -57,8 +57,8 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
-
-
+
+
Tabs badgeVue demo works fine 1`] = `
-
-
+
+
Tabs badgeVue demo works fine 1`] = `
-
-
+
+
Tabs badgeVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs contentVue demo works fine 1`] = `
-
-
+
+
Tabs contentVue demo works fine 1`] = `
-
-
+
+
Tabs contentVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
-
-
-
-
-
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
+
+
Tabs evenlyVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
Tabs iconVue demo works fine 1`] = `
-
-
+
+
Tabs iconVue demo works fine 1`] = `
-
-
+
+
Tabs iconVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
+
Tabs isometricVue demo works fine 1`] = `
-
-
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
-
+
@@ -3743,42 +3318,12 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -3828,8 +3373,8 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
+
@@ -3880,8 +3425,8 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
-
-
+
+
Tabs mobileVue demo works fine 1`] = `
-
-
+
+
-
+
@@ -3924,42 +3469,12 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -4021,8 +3536,8 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
+
+
Tabs sizeVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Tabs statusVue demo works fine 1`] = `
-
-
+
+
Tabs statusVue demo works fine 1`] = `
-
-
+
+
Tabs statusVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Tabs themeVue demo works fine 1`] = `
-
-
+
+
Tabs themeVue demo works fine 1`] = `
-
-
+
+
Tabs themeVue demo works fine 1`] = `
-
-
+
+
-
+
@@ -4637,42 +4071,12 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
@@ -4722,8 +4126,8 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
-
-
+
+
Tabs themeVue demo works fine 1`] = `
-
+
@@ -4774,8 +4178,8 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
-
-
+
+
Tabs themeVue demo works fine 1`] = `
-
-
+
+
-
+
@@ -4818,42 +4222,12 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/src/tabs/__test__/index.test.jsx b/src/tabs/__test__/index.test.jsx
index 041eacb0b..c611afdad 100644
--- a/src/tabs/__test__/index.test.jsx
+++ b/src/tabs/__test__/index.test.jsx
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import { ref } from 'vue';
import { Tabs, TabPanel } from '../index';
-import TTabNav from '../tab-nav-item.vue';
+import TTabNav from '../tab-nav-item';
import { sleep } from '../../shared/util';
import Sticky from '../../sticky/index';
import { trigger } from '../../image-viewer/__test__/touch';
diff --git a/src/tabs/demos/content.vue b/src/tabs/demos/content.vue
index 76d8365aa..98d553db5 100644
--- a/src/tabs/demos/content.vue
+++ b/src/tabs/demos/content.vue
@@ -16,17 +16,17 @@ const list = [
{
value: '1',
label: '选项',
- panel: '内容区',
+ panel: '内容区1',
},
{
value: '2',
label: '选项',
- panel: '内容区',
+ panel: '内容区2',
},
{
value: '3',
label: '上限六个文字',
- panel: '内容区',
+ panel: '内容区3',
},
];
diff --git a/src/tabs/index.ts b/src/tabs/index.ts
index df0db0569..745e9e3af 100644
--- a/src/tabs/index.ts
+++ b/src/tabs/index.ts
@@ -1,5 +1,5 @@
-import LocalTabs from './tabs.vue';
-import LocalTabPanel from './tab-panel.vue';
+import LocalTabs from './tabs';
+import LocalTabPanel from './tab-panel';
import { withInstall, WithInstallType } from '../shared';
import './style';
diff --git a/src/tabs/props.ts b/src/tabs/props.ts
index 9b4ce6fb7..25b111684 100644
--- a/src/tabs/props.ts
+++ b/src/tabs/props.ts
@@ -12,6 +12,15 @@ export default {
animation: {
type: Object as PropType,
},
+ /** 激活下划线的模式 */
+ bottomLineMode: {
+ type: String as PropType,
+ default: 'fixed' as TdTabsProps['bottomLineMode'],
+ validator(val: TdTabsProps['bottomLineMode']): boolean {
+ if (!val) return true;
+ return ['fixed', 'auto', 'full'].includes(val);
+ },
+ },
/** 选项卡列表 */
list: {
type: Array as PropType,
@@ -21,15 +30,6 @@ export default {
type: Boolean,
default: true,
},
- /** 激活下划线的模式*/
- bottomLineMode: {
- type: String as PropType,
- default: 'fixed' as TdTabsProps['bottomLineMode'],
- validator(val: TdTabsProps['theme']): boolean {
- if (!val) return true;
- return ['fixed', 'auto', 'full'].includes(val);
- },
- },
/** 组件尺寸 */
size: {
type: String as PropType,
diff --git a/src/tabs/tab-nav-item.tsx b/src/tabs/tab-nav-item.tsx
new file mode 100644
index 000000000..861fd3352
--- /dev/null
+++ b/src/tabs/tab-nav-item.tsx
@@ -0,0 +1,18 @@
+import { defineComponent } from 'vue';
+import config from '../config';
+import TabPanelProps from './tab-panel-props';
+import { useContent } from '../hooks/tnode';
+
+const { prefix } = config;
+
+export default defineComponent({
+ name: `${prefix}-tab-nav`,
+ props: {
+ label: TabPanelProps.label,
+ },
+ setup(props) {
+ const renderTNodeContent = useContent();
+
+ return () => {renderTNodeContent('default', 'label')}
;
+ },
+});
diff --git a/src/tabs/tab-nav-item.vue b/src/tabs/tab-nav-item.vue
deleted file mode 100644
index c0ea3cbc4..000000000
--- a/src/tabs/tab-nav-item.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
-
-
-
-
diff --git a/src/tabs/tab-panel-props.ts b/src/tabs/tab-panel-props.ts
index dc35c6515..ac590cb74 100644
--- a/src/tabs/tab-panel-props.ts
+++ b/src/tabs/tab-panel-props.ts
@@ -23,6 +23,8 @@ export default {
label: {
type: [String, Function] as PropType,
},
+ /** 是否启用选项卡懒加载 */
+ lazy: Boolean,
/** 用于自定义选项卡面板内容 */
panel: {
type: [String, Function] as PropType,
diff --git a/src/tabs/tab-panel.tsx b/src/tabs/tab-panel.tsx
new file mode 100644
index 000000000..37ed23f16
--- /dev/null
+++ b/src/tabs/tab-panel.tsx
@@ -0,0 +1,47 @@
+import { defineComponent, inject, Ref, computed, ref, watch } from 'vue';
+import config from '../config';
+import props from './tab-panel-props';
+import { useContent } from '../hooks/tnode';
+import { usePrefixClass } from '../hooks/useClass';
+import { TabValue } from '.';
+
+const { prefix } = config;
+const name = `${prefix}-tab-panel`;
+
+export default defineComponent({
+ name,
+ props,
+ setup(props) {
+ const renderTNodeContent = useContent();
+ const tabPanelClass = usePrefixClass('tab-panel');
+ const tabsClass = usePrefixClass('tabs');
+ const currentValue = inject>('currentValue');
+ const isActive = computed(() => currentValue.value === props.value);
+ const tabPanelClasses = computed(() => [`${tabPanelClass.value}`, `${tabsClass.value}__panel`]);
+ const isMount = ref(props.lazy ? isActive.value : true);
+
+ watch(
+ isActive,
+ () => {
+ if (isActive.value) {
+ if (!isMount.value) {
+ isMount.value = true;
+ }
+ } else if (props.destroyOnHide) {
+ isMount.value = false;
+ }
+ },
+ { immediate: true },
+ );
+
+ return () => {
+ if (!isMount.value) return null;
+
+ return (
+
+ {renderTNodeContent('default', 'panel')}
+
+ );
+ };
+ },
+});
diff --git a/src/tabs/tab-panel.vue b/src/tabs/tab-panel.vue
deleted file mode 100644
index 899eb0c34..000000000
--- a/src/tabs/tab-panel.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
-
-
-
-
-
-
diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
index 9f4e28c18..04afd531b 100644
--- a/src/tabs/tabs.en-US.md
+++ b/src/tabs/tabs.en-US.md
@@ -1,20 +1,21 @@
:: BASE_DOC ::
## API
+
### Tabs Props
name | type | default | description | required
-- | -- | -- | -- | --
animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
+bottomLineMode | String | fixed | options: fixed/auto/full | N
list | Array | - | Typescript：`Array` | N
showBottomLine | Boolean | true | \- | N
-bottomLineMode | String | fixed | options：fixed/auto/full ｜ N
-size | String | medium | options：medium/large | N
+size | String | medium | options: medium/large | N
spaceEvenly | Boolean | true | \- | N
sticky | Boolean | false | \- | N
stickyProps | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | \- | N
-theme | String | line | options：line/tag/card | N
+theme | String | line | options: line/tag/card | N
value | String / Number | - | `v-model` and `v-model:value` is supported。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
defaultValue | String / Number | - | uncontrolled property。Typescript：`TabValue` `type TabValue = string \| number`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
onChange | Function | | Typescript：`(value: TabValue, label: string) => void`
| N
@@ -29,19 +30,21 @@ change | `(value: TabValue, label: string)` | \-
click | `(value: TabValue, label: string)` | \-
scroll | `(scrollTop: number, isFixed: boolean)` | \-
+
### TabPanel Props
name | type | default | description | required
-- | -- | -- | -- | --
-badgeProps | Object | null | \- | N
+badgeProps | Object | - | \- | N
destroyOnHide | Boolean | true | \- | N
disabled | Boolean | false | \- | N
label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+lazy | Boolean | false | Enable tab lazy loading | N
panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
value | String / Number | - | Typescript：`TabValue` | N
+### CSS 变量
-### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
@@ -61,4 +64,4 @@ Name | Default Value | Description
--td-tab-item-tag-bg | @bg-color-secondarycontainer | -
--td-tab-item-tag-height | 32px | -
--td-tab-item-vertical-height | 54px | -
---td-tab-item-vertical-width | 104px | -
+--td-tab-item-vertical-width | 104px | -
\ No newline at end of file
diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
index b32b0a183..69a018895 100644
--- a/src/tabs/tabs.md
+++ b/src/tabs/tabs.md
@@ -1,14 +1,15 @@
:: BASE_DOC ::
## API
+
### Tabs Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
+bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
list | Array | - | 选项卡列表。TS 类型：`Array` | N
showBottomLine | Boolean | true | 是否展示底部激活线条 | N
-bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full ｜ N
size | String | medium | 组件尺寸。可选项：medium/large | N
spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
sticky | Boolean | false | 是否开启粘性布局 | N
@@ -29,19 +30,21 @@ change | `(value: TabValue, label: string)` | 激活的选项卡发生变化时
click | `(value: TabValue, label: string)` | 点击选项卡时触发
scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
+
### TabPanel Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
-badgeProps | Object | null | 透传至 Badge 组件 | N
+badgeProps | Object | - | 透传至 Badge 组件 | N
destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
disabled | Boolean | false | 是否禁用当前选项卡 | N
label | String / Slot / Function | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+lazy | Boolean | false | 是否启用选项卡懒加载 | N
panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabValue` | N
-
### CSS 变量
+
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
@@ -61,4 +64,4 @@ value | String / Number | - | 选项卡的值，唯一标识。TS 类型：`TabV
--td-tab-item-tag-bg | @bg-color-secondarycontainer | -
--td-tab-item-tag-height | 32px | -
--td-tab-item-vertical-height | 54px | -
---td-tab-item-vertical-width | 104px | -
\ No newline at end of file
+--td-tab-item-vertical-width | 104px | -
\ No newline at end of file
diff --git a/src/tabs/tabs.vue b/src/tabs/tabs.tsx
similarity index 52%
rename from src/tabs/tabs.vue
rename to src/tabs/tabs.tsx
index b27196677..9f47e8a7d 100644
--- a/src/tabs/tabs.vue
+++ b/src/tabs/tabs.tsx
@@ -1,51 +1,3 @@
-
-
-
-
-
diff --git a/src/tabs/type.ts b/src/tabs/type.ts
index 2acb4fc6a..3c85625b7 100644
--- a/src/tabs/type.ts
+++ b/src/tabs/type.ts
@@ -12,6 +12,11 @@ export interface TdTabsProps {
* 动画效果设置。其中 duration 表示动画时长
*/
animation?: TabAnimation;
+ /**
+ * 激活下划线的模式
+ * @default fixed
+ */
+ bottomLineMode?: 'fixed' | 'auto' | 'full';
/**
* 选项卡列表
*/
@@ -21,11 +26,6 @@ export interface TdTabsProps {
* @default true
*/
showBottomLine?: boolean;
- /**
- * 激活下划线的模式
- * @default fixed
- */
- bottomLineMode?: 'fixed' | 'auto' | 'full';
/**
* 组件尺寸
* @default medium
@@ -84,7 +84,6 @@ export interface TdTabsProps {
export interface TdTabPanelProps {
/**
* 透传至 Badge 组件
- * @default null
*/
badgeProps?: object;
/**
@@ -101,6 +100,11 @@ export interface TdTabPanelProps {
* 选项卡名称，可自定义选项卡导航内容
*/
label?: string | TNode;
+ /**
+ * 是否启用选项卡懒加载
+ * @default false
+ */
+ lazy?: boolean;
/**
* 用于自定义选项卡面板内容
*/