Vue-tabs-swiper NPM

vue-tabs-swiper

这是一个基于 hammerjs 滑动切换的 tab 选项卡，支持 vue/vue-jsx。

npm i vue-tabs-swiper -s

<vue-tabs-swiper>
    <div tab-label="热点">热点</div>
    <div tab-label="发现">发现</div>
    <div tab-label="关注">关注</div>
    // <My tab-label="我的" />
</vue-tabs-swiper>

演示

API

参数	说明	类型	默认值	版本
v-model	绑定当前选中标签的下标	Number	0	-
tab-color	tab 文字颜色	String	#484848	-
tab-active-color	tab 文字选中颜色	String	#31aaff	-
tab-font-weight	tab 字体加粗	String, Number	-	-
tab-font-size	tab 字体大小	Number	-	-
tab-slider-width	tab 选中下标记宽度	Number	20	-
tab-slider-height	tab 选中下标记高度	Number	-	-
border-bottom	是否显示 header 下边线	Boolean	false	-
touch-animation	tab 触摸动画	Boolean	true	-
animation-time	选项卡切换滑动动画过渡时间	Number	400	-
threshold	选项卡切换滑动滑动切换的阈值	Number	50	-
un-tab-group-wiath	当选项卡 head 无法获取宽度	Number	window.innerWidth	-
un-tabs-wiath	当选项卡无法获取宽度	Number	window.innerWidth	-
change	选项卡 change 事件	Function(index)	-	-
click	选项卡 tab click 事件	Function(index)	-	-
refresh	重新计算/渲染选项卡	Methods	\$refs.xx.refresh()	-