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 | type | 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

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

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint