Tabs

大标签 / Tabs

概述

Tabs使用场景类似于"栏目切换", Tab组件中传入props定义每个tab的结构/样式/路由位子等信息。

使用规则

页面结构参考下面示例
页面进入究竟激活那个子页面由路由规则决定
tabsHighlight特性只能在md模式下使用

源码:: tabs/tabs.vue , line 2

传入属性 / Props:

Name	Type	Attributes	Default	Description
`color`	String	<optional>		颜色
`mode`	String	<optional>	`'ios'`	模式
`tabsHighlight`	Boolean	<optional>	`'false'`	tab下面是否显示选中bar, 只在md模式生效
`tabsLayout`	String	<optional>	`'icon-top'`	tabbar的样式，可选配置: icon-top, icon-start, icon-end, icon-bottom, icon-hide, title-hide.

对外事件 / Fires:

component:Tabs#event:onTabChange

用法 / Usages

<Page>
   <Content>
       <router-view></router-view>
   </Content>
   <Footer>
       <Tabs tabsLayout="icon-top" @onTabChange="onTabChange" ref=tabs>
           <router-view></router-view>
           <Tab slot="tab" :to="{name:'tabsBottom.demoTab1'}" tabBadge="13" tabTitle="User" tabBadgeStyle="danger" tabIcon="person"></Tab>
           <Tab slot="tab" :to="{name:'tabsBottom.demoTab2'}" tabBadge="2" tabTitle="Cars" tabBadgeStyle="dark" tabIcon="car"></Tab>
           <Tab slot="tab" :to="{name:'tabsBottom.demoTab3'}" tabBadge="7" tabTitle="Star" tabIcon="star" :enabled="true"></Tab>
       </Tabs>
   </Footer>
</Page>
...
computed: {
  tabsComponent () {
   // 获取tabs的实例
   return this.$refs.tabs
  }
},
methods: {
   onTabChange(index){
     console.debug('事件 -> onTabChange-selectedIndex:' + index);
     console.debug('当前选择index的tab实例:')
     console.debug(this.tabsComponent.getByIndex(index))
     console.debug('获取当前在激活状态的tab实例:')
     console.debug(this.tabsComponent.getSelected())
     console.debug('由Tabs组件获取当前激活的index:' + this.tabsComponent.getActivatedIndex());
     console.debug('3s后选择第一个')
     clearTimeout(this.timer)
     this.timer = setTimeout(()=>{
       this.tabsComponent.select(0)
     },3000)
   },
 },