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