企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
<br /> ## 基础用法 通过`active`绑定当前激活标签对应的索引值,默认情况下启用第一个标签。 ``` <hd-tabs :active="active"> <hd-tab title="标签页1">标签页1的内容</hd-tab> <hd-tab title="标签页2">标签页2的内容</hd-tab> <hd-tab title="标签页3">标签页3的内容</hd-tab> </hd-tabs> ``` ``` export default { data() { return { active: 1, }; }, }; ``` <br /> ## 主题 theme 主题属性支持`blue` `green` `pink` `gray`四种盛事通项目统一主题颜色,默认为 blue。 ``` <hd-tabs :active="active" theme="green"> <hd-tab title="标签页1">标签页1的内容</hd-tab> <hd-tab title="标签页2">标签页2的内容</hd-tab> <hd-tab title="标签页3">标签页3的内容</hd-tab> </hd-tabs> ``` ``` export default { data() { return { active: 1, }; }, }; ``` <br /> ### props |属性名|说明|类型|默认参数| | --- | --- | --- | --- | |active|默认选中的tab下标|String|Number|`0`| |theme|主题色默认支持`blue` `green` `pink` `gray`盛事通四种颜色|String|`blue`| <br /> ### Events |事件名|说明|回调参数| | --- | --- | --- | |click|点击tab时触发|`index : 选中的下标` `title : 选中的标题`| |change|改变tab时触发|`index : 选中的下标` `title : 选中的标题`|