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