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 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)" :class="['tab-item', mergedValue.tabStyle, { active: activeTab === index }]" @tap="switchTab(index)"
:style="[tabItemStyle(index), getCustomStyle('tabItem'), activeTab === index ? getCustomStyle('tabItemActive') : {}]"> :style="[tabItemStyle(index), getCustomStyle('tabItem'), activeTab === index ? getCustomStyle('tabItemActive') : {}]">
<!-- 标签文本 --> <!-- 标签文本 -->
<text <text
:style="[tabTextStyle(index), getCustomStyle('tabText'), activeTab === index ? getCustomStyle('tabTextActive') : {}]">{{ :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" <view v-if="mergedValue.showIndicator" class="tab-indicator"
:style="[tabIndicatorStyle(index), getCustomStyle('indicator')]"></view> :style="[tabIndicatorStyle(index), getCustomStyle('indicator')]"></view>
@@ -64,7 +64,7 @@ export default {
// 组件数据 // 组件数据
data() { data() {
return { return {
activeTab: 0, // 当前激活的标签索引 activeTab: this.value?.activeTabIndex ?? 0, // 设置当前激活的标签索引
}; };
}, },
@@ -85,28 +85,14 @@ export default {
/** /**
* 标签页数据配置 * 标签页数据配置
* @type {Array<{title: string|Object, scrollTop: number, components: Array}>} * @type {Array<{title: string|Object, scrollTop: number, components: Array}>}
* @property {string} id 标签唯一标识
* @property {string|Object} title - 标签标题 * @property {string|Object} title - 标签标题
* • 字符串: 普通文本或国际化键(如 'tab.home' * • 字符串: 普通文本或国际化键(如 'tab.home'
* • 对象: 多语言映射(如 { 'zh-cn': '首页', 'en-us': 'Home' } * • 对象: 多语言映射(如 { 'zh-cn': '首页', 'en-us': 'Home' }
* @property {number} scrollTop - 标签滚动位置 * @property {number} scrollTop - 标签滚动位置
* @property {Array} components - 标签下的组件列表 * @property {Array} components - 标签下的组件列表
*/ */
tabs: [ tabs: []
{
title: 'Tab 1',
scrollTop: 0,
components: []
},
{
title: {
'zh-cn': '产品',
'en-us': 'Products',
'ja-jp': '製品'
},
scrollTop: 0,
components: []
}
]
}; };
// 基础配置 // 基础配置
@@ -117,7 +103,14 @@ export default {
* @default true * @default true
*/ */
showIndicator: true, showIndicator: true,
/**
* 激活的标签索引
* @type {number}
* @default 0
*/
activeTabIndex: 0,
/** /**
* 标签样式 * 标签样式
* @type {string} * @type {string}
@@ -125,7 +118,7 @@ export default {
* @values 'default', 'underline', 'card' * @values 'default', 'underline', 'card'
*/ */
tabStyle: 'default', tabStyle: 'default',
/** /**
* 标签位置 * 标签位置
* @type {string} * @type {string}
@@ -150,7 +143,7 @@ export default {
* • 百分比: '10%' (相对父元素高度) * • 百分比: '10%' (相对父元素高度)
*/ */
tabHeight: 24, tabHeight: 24,
/** /**
* 标签栏背景色 * 标签栏背景色
* @type {string} * @type {string}
@@ -158,7 +151,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
tabBgColor: '#ffffff', tabBgColor: '#ffffff',
/** /**
* 标签栏内边距 * 标签栏内边距
* @type {string} * @type {string}
@@ -191,7 +184,7 @@ export default {
* • 百分比: '5%' (相对父元素宽度) * • 百分比: '5%' (相对父元素宽度)
*/ */
tabGap: 10, tabGap: 10,
/** /**
* 字体大小 * 字体大小
* @type {number|string} * @type {number|string}
@@ -204,7 +197,7 @@ export default {
* • CSS变量: 'var(--font-size)' * • CSS变量: 'var(--font-size)'
*/ */
fontSize: 14, fontSize: 14,
/** /**
* 激活状态颜色 * 激活状态颜色
* @type {string} * @type {string}
@@ -212,7 +205,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
activeColor: '#ff4444', activeColor: '#ff4444',
/** /**
* 非激活状态颜色 * 非激活状态颜色
* @type {string} * @type {string}
@@ -231,7 +224,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
cardBgColor: '#f5f5f5', cardBgColor: '#f5f5f5',
/** /**
* 卡片激活背景色 * 卡片激活背景色
* @type {string} * @type {string}
@@ -239,7 +232,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
cardActiveBgColor: '#ff4444', cardActiveBgColor: '#ff4444',
/** /**
* 卡片默认文字颜色 * 卡片默认文字颜色
* @type {string} * @type {string}
@@ -247,7 +240,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
cardTextColor: '#666666', cardTextColor: '#666666',
/** /**
* 卡片激活文字颜色 * 卡片激活文字颜色
* @type {string} * @type {string}
@@ -255,7 +248,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
cardActiveTextColor: '#ffffff', cardActiveTextColor: '#ffffff',
/** /**
* 卡片圆角大小 * 卡片圆角大小
* @type {string} * @type {string}
@@ -263,7 +256,7 @@ export default {
* @format CSS长度值 * @format CSS长度值
*/ */
cardBorderRadius: '16px', cardBorderRadius: '16px',
/** /**
* 卡片外边距 * 卡片外边距
* @type {string} * @type {string}
@@ -271,7 +264,7 @@ export default {
* @format CSS margin值 * @format CSS margin值
*/ */
cardMargin: '0 5px', cardMargin: '0 5px',
/** /**
* 卡片内边距 * 卡片内边距
* @type {string} * @type {string}
@@ -290,7 +283,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
underlineColor: '#ff4444', underlineColor: '#ff4444',
/** /**
* 下划线高度 * 下划线高度
* @type {number} * @type {number}
@@ -298,7 +291,7 @@ export default {
* @unit 像素 * @unit 像素
*/ */
underlineHeight: 2, underlineHeight: 2,
/** /**
* 下划线圆角大小 * 下划线圆角大小
* @type {string} * @type {string}
@@ -306,7 +299,7 @@ export default {
* @format CSS长度值 * @format CSS长度值
*/ */
underlineBorderRadius: '1px', underlineBorderRadius: '1px',
/** /**
* 下划线左右边距 * 下划线左右边距
* @type {number} * @type {number}
@@ -325,7 +318,7 @@ export default {
* @format CSS颜色值 * @format CSS颜色值
*/ */
indicatorColor: '#ff4444', indicatorColor: '#ff4444',
/** /**
* 指示器高度 * 指示器高度
* @type {number} * @type {number}
@@ -350,7 +343,7 @@ export default {
* • 百分比: '5%' (相对父元素宽度) * • 百分比: '5%' (相对父元素宽度)
*/ */
contentPadding: 10, contentPadding: 10,
/** /**
* 内容区背景色 * 内容区背景色
* @type {string} * @type {string}
@@ -365,7 +358,7 @@ export default {
* • 预定义颜色: 'white', 'black', 'gray' * • 预定义颜色: 'white', 'black', 'gray'
*/ */
contentBgColor: '#f5f5f5', contentBgColor: '#f5f5f5',
/** /**
* 内容区最小高度 * 内容区最小高度
* @type {number|string} * @type {number|string}