# 组件名`cap4-tap` ---- ### 引入 ```js import Cap4Tap from 'cap4-pc-ui/lib/cap4-tap'; import 'cap4-pc-ui/lib/cap4-tap/css/cap4-tap.css'; ``` ### 基础用法 <template> <div class="demo-block"> <cap4-tap :tabs="tabs" @changeTab="changeTab" :activeTabIndex="activeTabIndex"></cap4-tap> </div> </template> <script> export default { data() { return { tabs: [ { value: 1, name: '北京' }, { value: 2, name: '上海' }, { value: 3, name: '广州' } ], activeTabIndex: 0 }; }, methods: { changeTab(index) { this.activeTabIndex = index; console.log('index', index); } } }; </script> ::: demo ```html <template> <div class="demo-block"> <cap4-tap :tabs="tabs" @changeTab="changeTab" :activeTabIndex="activeTabIndex"></cap4-tap> </div> </template> <script> export default { data() { return { tabs: [ { value: 1, name: '北京' }, { value: 2, name: '上海' }, { value: 3, name: '广州' } ], activeTabIndex: 0 }; }, methods: { changeTab(index) { this.activeTabIndex = index; console.log('index', index); } } }; </script> ``` ::: ### Attributes | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |------------------------------------ |---------- |------------- |-------- | |tabs | 数据 (选填)) | String | — | — | |activeTabIndex | 选中项 (选填)) | Number | — | 0 | |padding | padding样式 (选填)) | String | — | '5px 10px' | |showPartition | 是否显示竖线 (选填)) | Boolean | — | true | |showBorder | 是否显示边线 (选填)) | Boolean | — | false | |showTriangle | 是否显示三角 (选填)) | Boolean | — | false | |height | 高度 (选填)) | Number | — | — | |fontSize | 字体 (选填)) | Number | — | 14 | ### Event | 事件名称 | 说明 | 回调参数 | |------------- |----------- |--------- | |changeTab |切换| index |