Question

import { Tab,TabItem } from 'feui';
components: {
  [Tab.name]: Tab,
  [TabItem.name]: TabItem,
}

代码演示

基础用法

<fe-tab>
  <fe-tabitem selected @on-item-click="onItemClick">微信支付</fe-tabitem>
  <fe-tabitem @on-item-click="onItemClick">支付宝支付</fe-tabitem>
  <fe-tabitem @on-item-click="onItemClick">爱咋咋地支付</fe-tabitem>
</fe-tab>

定义bar固定宽度

<fe-tab :line-width="1" custom-bar-width="60px">
  <fe-tabitem selected>已发货</fe-tabitem>
  <fe-tabitem>未发货</fe-tabitem>
  <fe-tabitem>全部订单</fe-tabitem>
</fe-tab>

定义bar固定宽度

<fe-tab :line-width="1" :custom-bar-width="getBarWidth">
  <fe-tabitem selected>AA</fe-tabitem>
  <fe-tabitem>AAAA</fe-tabitem>
  <fe-tabitem>AAAAAAA</fe-tabitem>
</fe-tab>

getBarWidth: function (index) {
  return (index + 1) * 22 + 'px'
}

设置bar样式

<fe-tab style="width:500px;" bar-active-color="#41b883" :line-width="1">
  <fe-tabitem>已发货</fe-tabitem>
  <fe-tabitem selected>未发货</fe-tabitem>
  <fe-tabitem>全部订单</fe-tabitem>
  <fe-tabitem>全部订单</fe-tabitem>
  <fe-tabitem>全部订单</fe-tabitem>
</fe-tab>

设置不同的颜色

<fe-tab :animate="false">
  <fe-tabitem active-class="active-6-1">已发货</fe-tabitem>
  <fe-tabitem active-class="active-6-2" selected>未发货</fe-tabitem>
  <fe-tabitem active-class="active-6-3">全部订单</fe-tabitem>
</fe-tab>

.active-6-1 {
  color: rgb(252, 55, 140) !important;
  border-color: rgb(252, 55, 140) !important;
}
.active-6-2 {
  color: #04be02 !important;
  border-color: #04be02 !important;
}
.active-6-3 {
  color: rgb(55, 174, 252) !important;
  border-color: rgb(55, 174, 252) !important;
}

木有动画

<fe-tab :animate="false">
  <fe-tabitem>已发货</fe-tabitem>
  <fe-tabitem selected>未发货</fe-tabitem>
  <fe-tabitem>全部订单</fe-tabitem>
</fe-tab>

不可用

<fe-tab>
  <fe-tabitem selected>A</fe-tabitem>
  <fe-tabitem>B</fe-tabitem>
  <fe-tabitem disabled>Disabled</fe-tabitem>
</fe-tab>

气泡提示

<fe-tab>
  <fe-tabitem selected badge-label="1">收到的消息</fe-tabitem>
  <fe-tabitem badge-background="#38C972" badge-color="#fff" badge-label="2">发出的消息</fe-tabitem>
</fe-tab>

气泡提示

<fe-tab :line-width=2 active-color='#fc378c' v-model="index">
  <fe-tabitem class="nuim-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</fe-tabitem>
</fe-tab>
<fe-swiper v-model="index" height="100px" :show-dots="false">
  <swiper-item v-for="(item, index) in list2" :key="index">
    <div class="tab-swiper nuim-center">{{item}} Container</div>
  </swiper-item>
</fe-swiper>

list2: ['精选', '美食', '电影', '酒店', '外卖']

Tab

API

参数	说明	类型	默认值	可选值
line-width	线条高度	Number	3	-
active-color	活动状态的文字颜色	String	-	-
defaultColor	默认文字颜色	String	-	-
disabled-color	不可用状态的文字颜色	String	-	-
bar-active-color	活动状态的线条颜色	String	-	-
animate	切换时是够有动画	Boolean	true	false,true
custom-bar-width	底部线条宽度	String or Function	-	-
badge-label	气泡文字	String	-	-
badge-background	气泡背景颜色	String	-	-
badge-color	气泡文字颜色	String	-	-
prevent-default	是否禁止自动切换 tab-item	String	-	-

TabItem

API

参数	说明	类型	默认值	可选值
disabled	是否不可选	Boolean	false	false,true
active-class	当前项选中时的class	String	-	-

Events

事件名	参数	说明	备注
on-item-click	index	当前 tabItem 被点击时触发	-