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