## Tab 標簽頁 選項卡切換組件，常用于平級區域大塊內容的的收納和展現。  ### 代碼示例 基礎用法 ```html <cvu-tab value="1"> <cvu-tab-pane label="標簽1" name="1">標簽1內容</cvu-tab-pane> <cvu-tab-pane label="標簽2" name="2">標簽2內容</cvu-tab-pane> <cvu-tab-pane label="標簽3" name="3">標簽3內容</cvu-tab-pane> </cvu-tab> ``` 禁用  ```html <cvu-tab value="1"> <cvu-tab-pane label="標簽1" name="1">標簽1內容</cvu-tab-pane> <cvu-tab-pane label="標簽2" name="2" disabled>標簽2內容</cvu-tab-pane> <cvu-tab-pane label="標簽3" name="3">標簽3內容</cvu-tab-pane> </cvu-tab> ``` 圖標  ```html <cvu-tab value="1" name="parent"> <cvu-tab-pane label="標簽1" name="1" icon="md-chatboxes">標簽1內容</cvu-tab-pane> <cvu-tab-pane label="標簽2" name="2" icon="md-cloud-upload">標簽2內容</cvu-tab-pane> <cvu-tab-pane label="標簽3" name="3" icon="md-color-palette">標簽3內容</cvu-tab-pane> </cvu-tab> ``` 嵌套  ```html <cvu-tab value="1" name="parent"> <cvu-tab-pane label="標簽1" name="1" icon="md-chatboxes">標簽1內容</cvu-tab-pane> <cvu-tab-pane label="標簽2" name="2" icon="md-cloud-upload">標簽2內容</cvu-tab-pane> <cvu-tab-pane label="標簽3" name="3" icon="md-color-palette">標簽3內容</cvu-tab-pane> <cvu-tab-pane label="標簽4" name="4" icon="md-color-palette"> 標簽4內容 <cvu-tab value="1" name="child" type="card"> <cvu-tab-pane label="標簽1" tab="child" name="1">標簽1內容</cvu-tab-pane> <cvu-tab-pane label="標簽2" tab="child" name="2">標簽2內容</cvu-tab-pane> <cvu-tab-pane label="標簽3" tab="child" name="3">標簽3內容</cvu-tab-pane> <cvu-tab-pane label="標簽4" tab="child" name="4"> 標簽4內容 </cvu-tab-pane> </cvu-tab> </cvu-tab-pane> </cvu-tab> ``` ### tab props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | value | 當前激活 tab 面板的 name，可以使用 v-model 雙向綁定數據 | String | 默認為第一項的 name | | type | 頁簽的基本樣式，可選值為`line`和`card` | String | line | | size | 尺寸，可選值為`default`和`small`，僅在`type="line"`時有效 | String | default | | closable | 是否可以關閉頁簽，僅在`type="card"`時有效 | Boolean | false | | animated | 是否使用 CSS3 動畫 | Boolean | true | | capture-focus | Tabs 內的表單類組件是否自動獲得焦點 | Boolean | false | | before-remove | 關閉前的函數，返回 Promise 可阻止標簽關閉 | Function | \- | | name| 當嵌套使用 Tabs，指定 name 區分層級 | String | \- | | draggable | 開啟可配合事件 @on-drag-drop 實現拖拽調整頁簽順序 | Boolean | false | ### tab events | 事件名 | 說明 | 返回值 | | --- | --- | --- | | on-click | tab 被點擊時觸發 | name | | on-tab-remove | tab 被關閉時觸發 | name | | on-contextmenu | 當前頁簽點擊右鍵時觸發 | data, event, position | | on-drag-drop | 拖拽調整頁簽順序時觸發 | name1, name2, index1, index2, names | ### tab slot | 名稱 | 說明 | | --- | --- | | extra | 附加內容 | | contextMenu | 右鍵菜單 | ### tabpane props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | name | 用于標識當前面板，對應 value，默認為其索引值 | String | \- | | label | 選項卡頭顯示文字，支持 Render 函數| String | Function | 空 | | icon | 選項卡圖標 | String | \- | | disabled | 是否禁用該選項卡 | Boolean | false | | closable | 是否可以關閉頁簽，僅在`type="card"`時有效 | Boolean | null | | tab | 當嵌套使用 Tabs，設置該屬性指向對應 Tabs 的 name 字段 | String | \- | | index | 在 TabPane 使用 v-if 時，并不會按照預先的順序渲染，這時可設置 index，并從小到大排序(需大于 0) | Number | \- | | context-menu | 是否支持右鍵菜單 | Boolean | false |