FS-UI v0.1.33

Tab 标签

使用指南

import { Tab, Tabs } from 'fs-ui'
export default {
  components: {
    fsTab: Tab,
    fsTabs: Tabs
  }
}
1
2
3
4
5
6
7

代码演示

基本使用

默认情况下启用第一个标签，可以通过v-model绑定当前激活的标签索引

<fs-tabs v-model="active">
  <fs-tab
    v-for="(tab, index) in tabs"
    :key="index"
    :title="tab.title">
      {{tab.content}}
  </fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8
export default {
  data () {
    return {
      active: 2,
      tabs: [{
        title: '标签一',
        content: '内容一'
      }, {
        title: '标签二',
        content: '内容二'
      }, {
        title: '标签三',
        content: '内容三',
        disabled: true
      }, {
        title: '标签四',
        content: '内容四'
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

样式风格

通过设置tabs的type属性,可以实现样式风格的改变，可取值：default,card

<fs-tabs v-model="active" type="card">
  <fs-tab
    v-for="(tab, index) in tabs"
    :key="index"
    :title="tab.title">
      {{tab.content}}
  </fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8

禁用某项

通过设置tab的disabled属性实现该项不能切换, 如果需要监听禁用标签的点击事件，可以在tabs上监听disabled事件

<fs-tabs v-model="active" @disabled="disabledEvent">
  <fs-tab
    v-for="(tab, index) in tabs"
    :key="index"
    :title="tab.title"
    :disabled="tab.disabled">
      {{tab.content}}
  </fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8
9
export default {
  data () {
    return {
      active: 2,
      tabs: [{
        title: '标签一',
        content: '内容一'
      }, {
        title: '标签二',
        content: '内容二'
      }, {
        title: '标签三',
        content: '内容三',
        disabled: true
      }, {
        title: '标签四',
        content: '内容四'
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

横向滚动

当标签页的个数超过4个(tabs的swipeThreshold属性的默认值)，会横向滚动, 也可更改swipeThreshold属性实现自定义需求

<fs-tabs v-model="active" swipeThreshold="3">
  <fs-tab
    v-for="(tab, index) in tabs"
    :key="index"
    :title="tab.title">
      {{tab.content}}
  </fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8
export default {
  data () {
    return {
      active: 2,
      tabs: [{
        title: '标签一',
        content: '内容一'
      }, {
        title: '标签二',
        content: '内容二'
      }, {
        title: '标签三',
        content: '内容三'
      }, {
        title: '标签四',
        content: '内容四'
      }, {
        title: '标签五',
        content: '内容五'
      }, {
        title: '标签六',
        content: '内容六'
      }, {
        title: '标签七',
        content: '内容七'
      }, {
        title: '标签八',
        content: '内容八'
      }, {
        title: '标签九',
        content: '内容九'
      }, {
        title: '标签十',
        content: '内容十'
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

自定义标签

通过 title 插槽可以自定义标签内容

<fs-tabs v-model="active" @change="changeEvent">
  <fs-tab v-for="(tab, index) in tabs" :key="index">
    {{tab.content}}
    <div slot="title">
      <fs-icon :name="tab.icon"/>
      {{tab.title}}
    </div>
  </fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8
9
export default {
  data () {
    return {
      active: 2,
      tabs: [{
        title: '标签一',
        content: '内容一',
        icon: 'search-small'
      }, {
        title: '标签二',
        content: '内容二',
        icon: 'correct'
      }, {
        title: '标签三',
        content: '内容三',
        icon: 'jdpay'
      }]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

切换动画

通过animated属性可以开启切换标签内容时的转场动画

<fs-tabs v-model="active" animated>
  <fs-tab
    v-for="(tab, index) in tabs"
    :key="index"
    :title="tab.title">
      {{tab.content}}
  </fs-tab>
</fs-tabs>
1
2
3
4
5
6
7
8

Tabs参数

参数 说明 类型 默认值
v-model 绑定的值,当前的标签的索引 Number 0
type 样式类型，可选值为card String default
swipe-threshold 滚动阈值，标签数量超过多少个可滚动 Number 4
animated 是否启用切换动画 Boolean false
nav-line-min 滚动条宽度和导航最小内容一样 Boolean false

Tab参数

参数 说明 类型 默认值
title 标题 String -
disabled 是否禁用标签 Boolean false

Tabs事件

事件 说明 返回值
input input 事件 index：标签索引
change 当前激活的标签改变时触发 index：标签索引，title：标题
disabled 点击被禁用的标签时触发 index：标签索引，title：标题

Tab插槽

插槽 说明
title 自定义标签

← Tabbar 标签页 →