Tabs

大标签 / Tabs

概述

Tabs是一个使用$router.replace进行页面导航的组件，其中Tab组件中传入props定义每个tab的结构/样式/路由位子等信息。 Tabs使用场景类似于"栏目切换"，如果你使用的是IOS手机，请参考"App Store"应用。下图也许能更直观的表达Tabs的职责范围。

tabs的设计

使用规则

Tabs和Tab必须组合使用
Tab组件需要增加slot="tab"插槽标记
Tabs组件必须在Page组件中，而且子路由也是一个Page包裹的页面
页面路由插槽<router-view></router-view>写在Tabs中，是否开启keep-alive由业务自己决定
页面进入究竟激活那个子页面由路由规则决定
tabsHighlight特性只能在md模式下使用

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

传入属性 / Props:

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

插槽 / Slots:

Name	Description
`tab`	Tab组件的插槽

对外事件 / Fires:

component:Tabs#event:onTabChange

用法 / Usages

<vm-page>
   <vm-tabs tabsLayout="icon-top" tabsPlacement="bottom" @onTabChange="onTabChange" ref=tabs>
       <router-view></router-view>
       <vm-tab slot="tab" :to="{name:'tabsBottom.demoTab1'}" tabBadge="13" tabTitle="User" tabBadgeStyle="danger" tabIcon="person"></vm-tab>
       <vm-tab slot="tab" :to="{name:'tabsBottom.demoTab2'}" tabBadge="2" tabTitle="Cars" tabBadgeStyle="dark" tabIcon="car"></vm-tab>
       <vm-tab slot="tab" :to="{name:'tabsBottom.demoTab3'}" tabBadge="7" tabTitle="Star" tabIcon="star" :enabled="true"></vm-tab>
   </vm-tabs>
</vm-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)
   },
 },