vue-tab-component
A Vue2.0 tab component which can control DOM render number
Feature
- Custom DOM render number
- provide goBegin/goEnd Function
- suppord left、right Position
- suppord slot to change tab content
EN || 如果它对你有帮助的话，请Star支持！！！ exemple project
预览
快速开始
Install
npm install vue-tab-component --save
Usage
A simple project use vue-tab-component
main.js
import Vue from 'vue'import tabs from 'vue-tab-component' Vue.use(tabs)API
Attribute
| Name | Description | Type | Default |
|---|---|---|---|
| data | data of tab {key:'key',title:'word'} | Array | [] |
| tabPosition | tab' position, one of ['top','bottom','left','right'] | String | bottom |
| type | css type, one of ['card','line'] | String | line |
| closable | if tab can delete | Boolean | false |
| activeName | active tab's key | String | '' |
| maxnum | max number of DOM render tab at once | Number | 20 |
| beforeChangeTab | param: key, tab won't change when return false | Function | (key) => true |
| stretch （todo） | if tab stretchable because of content | Boolean | false |
| hideDirectionBar | if tab's left/right bar show or hide | Boolean | false |
Method
| Name | Description | Param |
|---|---|---|
| goBegin | jump to tab's begin | - |
| goEnd | jump to tab's end | - |
| scrollPrev | slip to after part | - |
| scrollNext | slip to next part | - |
| scrollToActiveTab | slip to active tab | - |
Event
| Name | Description | Param |
|---|---|---|
| on-click | when tab on clicking, return tab's key | key tab's key |
| on-tab-remove | when tab on deleting, return tab's key | key tab's key |
slot
| name | data | exemple |
|---|---|---|
| tab | tab's data | <template #tab="{ data }"> |
License