refactor(diy-tab): 优化标签组件结构和默认配置

- 使用 tab.id 作为 v-for 的 key 提高渲染性能
- 移除默认标签数据,改为空数组
- 添加 activeTabIndex 配置项
- 调整代码格式和注释
This commit is contained in:
2026-01-30 17:41:23 +08:00
parent 475edc93a6
commit e2b89c348f

View File

@@ -5,13 +5,13 @@
<!-- 标签导航栏 -->
<view class="tab-nav" :style="[tabNavStyle, getCustomStyle('nav')]">
<!-- 标签项循环渲染 -->
<view v-for="(tab, index) in mergedValue.tabs" :key="index"
<view v-for="(tab, index) in mergedValue.tabs" :key="tab.id || index"
:class="['tab-item', mergedValue.tabStyle, { active: activeTab === index }]" @tap="switchTab(index)"
:style="[tabItemStyle(index), getCustomStyle('tabItem'), activeTab === index ? getCustomStyle('tabItemActive') : {}]">
<!-- 标签文本 -->
<text
:style="[tabTextStyle(index), getCustomStyle('tabText'), activeTab === index ? getCustomStyle('tabTextActive') : {}]">{{
getTabTitle(tab.title) }}</text>
getTabTitle(tab.title) }}</text>
<!-- 标签指示器底部线条 -->
<view v-if="mergedValue.showIndicator" class="tab-indicator"
:style="[tabIndicatorStyle(index), getCustomStyle('indicator')]"></view>
@@ -64,7 +64,7 @@ export default {
// 组件数据
data() {
return {
activeTab: 0, // 当前激活的标签索引
activeTab: this.value?.activeTabIndex ?? 0, // 设置当前激活的标签索引
};
},
@@ -85,28 +85,14 @@ export default {
/**
* 标签页数据配置
* @type {Array<{title: string|Object, scrollTop: number, components: Array}>}
* @property {string} id 标签唯一标识
* @property {string|Object} title - 标签标题
* • 字符串: 普通文本或国际化键(如 'tab.home'
* • 对象: 多语言映射(如 { 'zh-cn': '首页', 'en-us': 'Home' }
* @property {number} scrollTop - 标签滚动位置
* @property {Array} components - 标签下的组件列表
*/
tabs: [
{
title: 'Tab 1',
scrollTop: 0,
components: []
},
{
title: {
'zh-cn': '产品',
'en-us': 'Products',
'ja-jp': '製品'
},
scrollTop: 0,
components: []
}
]
tabs: []
};
// 基础配置
@@ -118,6 +104,13 @@ export default {
*/
showIndicator: true,
/**
* 激活的标签索引
* @type {number}
* @default 0
*/
activeTabIndex: 0,
/**
* 标签样式
* @type {string}