vue-swipe-tab-layout

A vue component that simulate native Android component-tabLayout (一个模仿安卓tabLayout的Vue组件)

Install

npm i -S vue-swipe-tab-layout

Usage

swipe-tab-container Attributes

参数	说明	类型	可选值	默认值
owner	当前组件的拥有者，可以设置为所在的路由页面或者父组件	String	-	''
tabNavList	tab-nav 对象列表	Array	-	[]
currentTabIndex	当前所在的tab index	Number	-	0
indicatorWidthScaleFactor	nav-indicator的宽度控制因子	Number	-	0.1
swipeTabNavWrapperStyle	tab-nav的容器的自定义样式	Object	-	{}
swipeTabContentItemStyle	tab-content的容器的自定义样式	Object	-	{}
fullFlex	nav-item是否平分父级宽度	Boolean	-	false

swipe-tab-container event

事件名	说明	回调参数
tabNavClick	单击 nav-item	{ event: Event, index: Number, tabNav: Object }
tabNavdblClick	双击 nav-item	{ event: Event, index: Number, tabNav: Object }

swipe-tab-container slots

for (tabNav of tabNavList) { /* ... */ }

slot名	说明
swipe-tab-nav-${tabNav.key}	遍历 tabNavList 中的每一个对象，利用key创建slot
swipe-tab-content-${tabNav.key}	遍历 tabNavList 中的每一个对象，利用key创建slot

swipe-tab-nav Attributes

参数	说明	类型	可选值	默认值
owner	当前组件的拥有者，可以设置为所在的路由页面或者父组件	String	-	''
tabLabel	显示的内容	String	-	''

swipe-tab-nav slots

name	说明
default	替换默认的文本

Preview Demo

# install dependencies 
npm install
 
# serve with hot reload at localhost:8080 
npm run demo

Build Setup

# install dependencies
npm install
 
# build for production with minification
npm run build
 
# build for production and view the bundle analyzer report
npm run build --report

使用方法

具体请查看 /demo/App.vue