refactor(diy-tab): 优化标签组件结构和默认配置
- 使用 tab.id 作为 v-for 的 key 提高渲染性能 - 移除默认标签数据,改为空数组 - 添加 activeTabIndex 配置项 - 调整代码格式和注释
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user