# 組件名`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 |