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

TabItem

API

Events