Tantalum UI

Appearance

Return to top
On this page

TabBar 标签列

vue
<template>
  <ta-group title="基础用法">
    <ta-tab-bar :options="baseList" v-model="activeValue" ref="tabBarRef" />
  </ta-group>
  <ta-group title="徽标">
    <ta-tab-bar :options="badgeList" />
  </ta-group>
  <ta-group title="自定义图标">
    <ta-tab-bar :options="customIconList" />
  </ta-group>
  <ta-group title="自定义颜色">
    <ta-tab-bar
      color="#8B8DB8"
      activeColor="#ffffff"
      style="background-color: #6667ab"
      :options="baseList"
    />
  </ta-group>
  <ta-group title="自定义图片（icon=URL）">
    <ta-tab-bar class="exp-tabBar-custom" :options="imageList" />
  </ta-group>
  <ta-group title="配合 Fixed 实现置底">
    <ta-fixed>
      <ta-tab-bar
        :options="baseList"
        v-model="activeValue"
        class="exp-tabBar-w"
        @change="onChange"
      />
    </ta-fixed>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, markRaw, ref } from 'vue'
import { baseList, badgeList, imageList } from './data'
import { showToast, type TabBarOnChange } from '@/index'
import TaobaoSvg from '../../../assets/icons/taobao.svg?vueComponent'
import QqSvg from '../../../assets/icons/qq.svg?vueComponent'
import WechatSvg from '../../../assets/icons/wechat.svg?vueComponent'
import WeiboSvg from '../../../assets/icons/weibo.svg?vueComponent'

const customIconList = [
  {
    value: 'wechat',
    label: '微信',
    icon: markRaw(WechatSvg)
  },
  {
    value: 'qq',
    label: 'QQ',
    icon: markRaw(QqSvg)
  },
  {
    value: 'weibo',
    label: '微博',
    icon: markRaw(WeiboSvg)
  },
  {
    value: 'taobao',
    label: '淘宝',
    icon: markRaw(TaobaoSvg)
  }
]

export default defineComponent({
  name: 'ExpTabBar',
  setup() {
    const onChange: TabBarOnChange = (value, index) => {
      console.log('change', value, index)
      showToast(`切换到第${index + 1}个`)
    }

    const activeValue = ref(0)
    const tabBarRef = ref()

    return {
      tabBarRef,
      activeValue,
      customIconList,
      baseList,
      badgeList,
      imageList,
      onChange
    }
  }
})
</script>

Import

js
import { TaTabBar } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type {
  TabBarOnChange,
  TabBarOptions,
  TabBarOption,
  BadgeOption,
  TabBarRef
} from 'tantalum-ui-mobile'

Props

属性类型默认值必填说明
v-modelstring | number否当前激活项的 value 值
optionsTabBarOptions[]是tab 数据集
colorstring否自定义默认态字体和图标颜色
active-colorstring否自定义激活态的字体和图标颜色

TabBarOptions

ts
type TabBarOption = {
  label: string
  value: number | string
  icon?: IconData
  activeIcon?: IconData
  badge?: BadgeOption
  subLabel?: string
}

type TabBarOptions = (number | string | TabBarOption)[]
key类型默认值必填说明
valuestring | number是唯一值（v-model 使用）
labelstring是标签名
iconstring | Component否设置图标，使用 Icon 组件，也支持图像 URL
activeIconstring | Component否设置激活态图标，也支持图像 URL，没有设置则沿用 icon 属性
badgeBadgeOption否徽标，使用 Badge 组件
js
const options = [
  {
    value: 1,
    label: '首页',
    icon: 'HomeOutlined',
    badge: '热'
  },
  {
    value: 2,
    label: '搜索',
    icon: 'SearchOutlined',
    badge: {
      dot: true,
      content: 1
    }
  }
]

也可以直接设置为 string[] 或 number[]，如：

js
const options = ['aaa', 'bbb', 'ccc']

将被转为：

js
const options = [
  {
    value: 'aaa',
    label: 'aaa'
  },
  {
    value: 'bbb',
    label: 'bbb'
  }
  {
    value: 'ccc',
    label: 'ccc'
  }
]

注：注意数组项要保持唯一性。

BadgeOption

ts
type BadgeOption =
  | number
  | string
  | Partial<{
      color: string
      content: string | number
      offset: number[]
      animated: boolean
      dot: boolean
      maxCount: number
      showZero: boolean
    }>

参数主要是基于 Badge 组件的 props，如果传入是 number 或者 string 则设置直接设置 content 属性。

Events

事件描述回调函数参数TypeScript 函数
change点击切换 tab 时触发( value：string | number, index: number )TabBarOnChange

change 的回调参数

参数类型描述
valuestring | number当前激活项的 value 值
indexnumber当前激活项的索引值

Methods

ts
interface TabBarRef {
  switchTo: (value: string | number) => void
  switchToIndex: (index: number) => void
}
方法名说明
switchTo切换到指定 value 的 Tab
switchToIndex切换到指定索引的 Tab