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

The 996ICU License (996ICU)