diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue index 1c85707..8fceca2 100644 --- a/components-diy/diy-tab.vue +++ b/components-diy/diy-tab.vue @@ -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 }; },