基于Vue2.0的轻量级tab组件。可支持大数据量渲染
功能
- 自定义实际渲染数量（处理tab过多情况）
- 提供前进后退方法
- 支持left、right排列
- tab内容区域提供slot，方便自定义
EN || 如果它对你有帮助的话，请Star支持！！！ 示例项目
Install
npm install vue-tab-component --save
Usage
main.js
import Vue from 'vue'
import tabs from 'vue-tab-component'
Vue.use(tabs)属性
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| data | tab的数据 {key:'key',title:'文字'} | Array | [] |
| tabPosition | tab位置,总共有四种: top、bottom、left、right | String | bottom |
| type | 样式种类，有card、line 两种 | String | line |
| closable | 是否可删除tab | Boolean | false |
| activeName | 当前激活状态的key | String | '' |
| maxnum | 最多渲染多少tab，用以解决大数据量tab | Number | 20 |
| beforeChangeTab | 参数是key，切换tab之前，可以返回boolean值，阻止切换 | Function | (key) => true |
| stretch （todo） | 是否根据tab内容长度伸缩 | Boolean | false |
| hideDirectionBar | 是否隐藏左右方向图标 | Boolean | false |
方法
| 方法名 | 描述 | 参数 |
|---|---|---|
| goBegin | 跳转到tab起始位置 | - |
| goEnd | 跳转到tab末尾 | - |
| scrollPrev | 向前滑动tab | - |
| scrollNext | 向后滑动tab | - |
| scrollToActiveTab | 定位到active的tab上 | - |
事件
| 事件名 | 描述 | 参数 |
|---|---|---|
| on-click | 当tab点击时触发，返回tab的key | key tab的key |
| on-tab-remove | 当删除tab时触发，返回tab的key | key tab的key |
插槽
| 插槽名 | 数据 | 例子 |
|---|---|---|
| tab | tab：单个tab数据 | <template #tab="{ data }"> |
License