FS-UI v0.1.33

Tabbar 标签页

使用指南

import { Tabbar, TabbarItem } from 'fs-ui'
export default {
  components: {
    Tabbar,
    TabbarItem
  }
}
1
2
3
4
5
6
7

代码演示

  • 基本标签页
<fs-tabbar v-model="active" :fixed="false" @change="changeItem">
  <fs-tabbar-item icon="user">标签一</fs-tabbar-item>
  <fs-tabbar-item icon="view">标签二</fs-tabbar-item>
  <fs-tabbar-item icon="view-slash">标签三</fs-tabbar-item>
  <fs-tabbar-item icon="key">标签四</fs-tabbar-item>
</fs-tabbar>
1
2
3
4
5
6
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    changeItem (curr) {
      console.log(curr)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
  • 自定义内容
<fs-tabbar v-model="active" :fixed="false" @change="changeItem">
  <fs-tabbar-item>
    <fs-icon name="lock"/>
    <span>自定义</span>
  </fs-tabbar-item>
  <fs-tabbar-item>
    <span>相反</span>
    <fs-icon name="view"/>
  </fs-tabbar-item>
  <fs-tabbar-item icon="view-slash">标签三</fs-tabbar-item>
  <fs-tabbar-item icon="key">标签四</fs-tabbar-item>
</fs-tabbar>
1
2
3
4
5
6
7
8
9
10
11
12
  • 固定位置
<fs-tabbar v-model="active" @change="changeItem">
  <fs-tabbar-item icon="user">标签一</fs-tabbar-item>
  <fs-tabbar-item icon="view">标签二</fs-tabbar-item>
  <fs-tabbar-item icon="view-slash">标签三</fs-tabbar-item>
  <fs-tabbar-item icon="key">标签四</fs-tabbar-item>
</fs-tabbar>
1
2
3
4
5
6

Tabbar参数

参数 说明 类型 默认值
v-model 当前选中项下标 Number -
fixed 是否固定在底部 Boolean true
z-index 定位元素层级 Number String
border-top 上边框 Boolean true
border-bottom 下边框 Boolean true

Tabbar事件

事件名 说明 参数
change 切换时触发 active: 当前选中项下

TabbarItem参数

| 参数 | 说明 | 类型 | 默认值 | | ----- | ------------------------ | ------------------ | ------ | | | icon | 图标名称 | String | - | | to | 路由跳转名称 | String | - | | badge | 显示的徽章数 | Number | String | - | | dot | 不显示徽章，只显示小圆点 | String | - |

← Linkage 级联选择 →