Vue-layout-tab NPM

vue-layout-tab

usage

install

yarn add vue-layout-tab

example

<v-tab :headers="headers">
  <template slot="0">
    <VueScroll>
      建议使用 better-scroll
    </VueScroll>
  </template>
  <template slot="1">
    <p>非 routable 模式下，template 个数与 headers 的长度相同</p>
  </template>
</v-tab>

args

name	default	required	meaning
headers	[]	Y	tab-header 的数组，支持 icon
default-index	0	N	默认选中的 tab index
routable	false	N	设为 true 则为路由模式
animated	false	N	是否支持切换动画
duration	300	N	切换动画的时长，ms
align	around	N	tab 的展示模式 'around', 'start', 'center', 'end'
swipe	false	N	是否支持左右手势滑动
sticky	false	N	是否让 tab-header 吸附在页面顶部

tips

tab 较多时建议align：start
swipe: true的时候建议使用better-scroll
使用better-scroll的使用，建议sticky: true
headers可以是字符串数组，也可以是对象数组，routable: true时，使用对象数组，每个tab有route属性，为指向页面的name
routable：true的时候，不需要<template slot>