Tab 组件使用教程

优质

小牛编辑

133浏览

2023-12-01

安装

import { Tab, TabItem } from 'vux'

export default {
  components: {
    Tab,
    TabItem
  }
}

// 在入口文件全局引入

import Vue from 'vue'
import { Tab, TabItem } from 'vux'

Vue.component('tab', Tab)
Vue.component('tab-item', TabItem)

如果需要监听tab-item的点击事件并取得索引，请使用on-item-click事件:

<tab>
  <tab-item @on-item-click="handler"></tab-item>
</tab>

名字	类型	默认值	说明	版本要求
line-width	number	3	线条宽度	--
active-color	string		选中时文字颜色	--
default-color	string		默认文字颜色	--
disabled-color	string		不可点击时文字颜色	--
bar-active-color	string		设置底部`bar`颜色，该颜色也可以通过`less`变量`@tab-bar-active-color`设置。	--
animate	boolean	true	切换时是否需要动画	--
custom-bar-width	string function		设置底部`bar`宽度，默认宽度是整体tab宽度平分，比如`50px`。使用函数时参数为当前索引`index`，你可以定义不同`tab-item`对应的`bar`宽度。	v2.1.1-rc.7
badge-label	string		徽标文字	v2.3.5
badge-background	string		徽标背景颜色	v2.3.5
badge-color	string		徽标文字颜色	v2.3.5
prevent-default	string	false	是否禁止自动切换 tab-item	v2.7.2
scroll-threshold	number	4	滚动阀值，超过可滚动	v2.8.1
bar-position	string	bottom	边框位置，可以为 bottom 或者 top。仅支持 animate 为 true 的情况。	v2.9.0

名字	参数	说明	版本要求
@on-item-click	`(index)`	当前 tabItem 被点击时触发	v2.2.1-rc.4