refactor(diy-tab): 将默认配置拆分为多个独立对象以提高可维护性

将原本单一的defaults对象拆分为多个独立的配置对象(tabsConfig、baseConfig等),并通过展开运算符合并。这样修改使代码结构更清晰,便于后续维护和扩展。
This commit is contained in:
2026-01-27 14:48:40 +08:00
parent cb86cba389
commit 475edc93a6

View File

@@ -80,7 +80,8 @@ export default {
computed: {
// 合并默认值和传入值
mergedValue() {
const defaults = {
// 标签页数据配置
const tabsConfig = {
/**
* 标签页数据配置
* @type {Array<{title: string|Object, scrollTop: number, components: Array}>}
@@ -105,8 +106,11 @@ export default {
scrollTop: 0,
components: []
}
],
]
};
// 基础配置
const baseConfig = {
/**
* 是否显示指示器
* @type {boolean}
@@ -128,8 +132,11 @@ export default {
* @default 'top'
* @values 'top', 'bottom', 'left', 'right'
*/
tabPosition: 'top',
tabPosition: 'top'
};
// 导航栏样式
const navConfig = {
/**
* 标签栏高度
* @type {number|string}
@@ -166,8 +173,11 @@ export default {
* • 百分比: '5% 10%' (相对父元素宽度)
* @note 卡片样式下会忽略此配置,自动使用基于 tabGap 的内边距
*/
tabPadding: '0',
tabPadding: '0'
};
// 标签项样式
const tabItemConfig = {
/**
* 标签间距
* @type {number|string}
@@ -209,8 +219,11 @@ export default {
* @default '#666666'
* @format CSS颜色值
*/
inactiveColor: '#666666',
inactiveColor: '#666666'
};
// 卡片样式
const cardConfig = {
/**
* 卡片默认背景色
* @type {string}
@@ -265,8 +278,11 @@ export default {
* @default '0 10px'
* @format CSS padding值
*/
cardPadding: '0 10px',
cardPadding: '0 10px'
};
// 下划线样式
const underlineConfig = {
/**
* 下划线颜色
* @type {string}
@@ -297,8 +313,11 @@ export default {
* @default 10
* @unit 像素
*/
underlineMargin: 10,
underlineMargin: 10
};
// 指示器样式
const indicatorConfig = {
/**
* 指示器颜色
* @type {string}
@@ -313,8 +332,11 @@ export default {
* @default 2
* @unit 像素
*/
indicatorHeight: 2,
indicatorHeight: 2
};
// 内容区域样式
const contentConfig = {
/**
* 内容区内边距
* @type {number|string}
@@ -356,8 +378,11 @@ export default {
* • CSS变量: 'var(--content-min-height)'
* • 百分比: '50%' (相对父元素高度)
*/
contentMinHeight: 200,
contentMinHeight: 200
};
// 自定义样式配置
const customStylesConfig = {
/**
* 自定义样式配置
* @type {Object}
@@ -397,6 +422,19 @@ export default {
}
};
// 合并所有配置
const defaults = {
...tabsConfig,
...baseConfig,
...navConfig,
...tabItemConfig,
...cardConfig,
...underlineConfig,
...indicatorConfig,
...contentConfig,
...customStylesConfig
};
// 使用展开运算符合并默认值和传入值
return { ...defaults, ...this.value };
},