Vue-tab-simplify NPM

vue-tab-simplify

vue tab组件

试了很多tab组件限制都比较大，而且很多无用功能, 此组件只负责基本逻辑，值的双向绑定及相关动画，具体样式自行设置，可操作空间比较大

使用方法：

import tab from 'vue-tab-simplify';
Vue.use(tab);

// or

import {WTabs, WTabItem} from 'vue-tab-simplify';

<WTabs @on-index-change='tabIndexChange'>
  <WTabItem @on-item-click="onItemClick">首页</WTabItem>
  <WTabItem @on-item-click="onItemClick" :selected='true'>详情</WTabItem>
  <WTabItem @on-item-click="onItemClick">关于我们</WTabItem>
  <WTabItem @on-item-click="onItemClick">其他</WTabItem>
  <WTabItem @on-item-click="onItemClick">哔哩哔哩</WTabItem>
</WTabs>

样式及动画效果均可通过css 自行设置

WTabs

props:

props	description
scrollThreshold	tab数量大于多少时启用滚动模式，启用时会自动定位，如不需要不要设置会造成不必要的计算
lineStyle	选中线的样式