diff --git a/components-diy/diy-tab.vue b/components-diy/diy-tab.vue index 8fceca2..4534fef 100644 --- a/components-diy/diy-tab.vue +++ b/components-diy/diy-tab.vue @@ -5,13 +5,13 @@ - {{ - getTabTitle(tab.title) }} + getTabTitle(tab.title) }} @@ -64,7 +64,7 @@ export default { // 组件数据 data() { return { - activeTab: 0, // 当前激活的标签索引 + activeTab: this.value?.activeTabIndex ?? 0, // 设置当前激活的标签索引 }; }, @@ -85,28 +85,14 @@ export default { /** * 标签页数据配置 * @type {Array<{title: string|Object, scrollTop: number, components: Array}>} + * @property {string} id 标签唯一标识 * @property {string|Object} title - 标签标题 * • 字符串: 普通文本或国际化键(如 'tab.home') * • 对象: 多语言映射(如 { 'zh-cn': '首页', 'en-us': 'Home' }) * @property {number} scrollTop - 标签滚动位置 * @property {Array} components - 标签下的组件列表 */ - tabs: [ - { - title: 'Tab 1', - scrollTop: 0, - components: [] - }, - { - title: { - 'zh-cn': '产品', - 'en-us': 'Products', - 'ja-jp': '製品' - }, - scrollTop: 0, - components: [] - } - ] + tabs: [] }; // 基础配置 @@ -117,7 +103,14 @@ export default { * @default true */ showIndicator: true, - + + /** + * 激活的标签索引 + * @type {number} + * @default 0 + */ + activeTabIndex: 0, + /** * 标签样式 * @type {string} @@ -125,7 +118,7 @@ export default { * @values 'default', 'underline', 'card' */ tabStyle: 'default', - + /** * 标签位置 * @type {string} @@ -150,7 +143,7 @@ export default { * • 百分比: '10%' (相对父元素高度) */ tabHeight: 24, - + /** * 标签栏背景色 * @type {string} @@ -158,7 +151,7 @@ export default { * @format CSS颜色值 */ tabBgColor: '#ffffff', - + /** * 标签栏内边距 * @type {string} @@ -191,7 +184,7 @@ export default { * • 百分比: '5%' (相对父元素宽度) */ tabGap: 10, - + /** * 字体大小 * @type {number|string} @@ -204,7 +197,7 @@ export default { * • CSS变量: 'var(--font-size)' */ fontSize: 14, - + /** * 激活状态颜色 * @type {string} @@ -212,7 +205,7 @@ export default { * @format CSS颜色值 */ activeColor: '#ff4444', - + /** * 非激活状态颜色 * @type {string} @@ -231,7 +224,7 @@ export default { * @format CSS颜色值 */ cardBgColor: '#f5f5f5', - + /** * 卡片激活背景色 * @type {string} @@ -239,7 +232,7 @@ export default { * @format CSS颜色值 */ cardActiveBgColor: '#ff4444', - + /** * 卡片默认文字颜色 * @type {string} @@ -247,7 +240,7 @@ export default { * @format CSS颜色值 */ cardTextColor: '#666666', - + /** * 卡片激活文字颜色 * @type {string} @@ -255,7 +248,7 @@ export default { * @format CSS颜色值 */ cardActiveTextColor: '#ffffff', - + /** * 卡片圆角大小 * @type {string} @@ -263,7 +256,7 @@ export default { * @format CSS长度值 */ cardBorderRadius: '16px', - + /** * 卡片外边距 * @type {string} @@ -271,7 +264,7 @@ export default { * @format CSS margin值 */ cardMargin: '0 5px', - + /** * 卡片内边距 * @type {string} @@ -290,7 +283,7 @@ export default { * @format CSS颜色值 */ underlineColor: '#ff4444', - + /** * 下划线高度 * @type {number} @@ -298,7 +291,7 @@ export default { * @unit 像素 */ underlineHeight: 2, - + /** * 下划线圆角大小 * @type {string} @@ -306,7 +299,7 @@ export default { * @format CSS长度值 */ underlineBorderRadius: '1px', - + /** * 下划线左右边距 * @type {number} @@ -325,7 +318,7 @@ export default { * @format CSS颜色值 */ indicatorColor: '#ff4444', - + /** * 指示器高度 * @type {number} @@ -350,7 +343,7 @@ export default { * • 百分比: '5%' (相对父元素宽度) */ contentPadding: 10, - + /** * 内容区背景色 * @type {string} @@ -365,7 +358,7 @@ export default { * • 预定义颜色: 'white', 'black', 'gray' */ contentBgColor: '#f5f5f5', - + /** * 内容区最小高度 * @type {number|string}