refactor(diy-tab): 将默认配置拆分为多个独立对象以提高可维护性
将原本单一的defaults对象拆分为多个独立的配置对象(tabsConfig、baseConfig等),并通过展开运算符合并。这样修改使代码结构更清晰,便于后续维护和扩展。
This commit is contained in:
@@ -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 };
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user