Tab 标签

使用指南

规则

• 标签数量，一般控制2-5个
• 标签中的文案需要精简，一般2-4个字
• 最多设置5个选项，超过的选项可以滑动展示

代码演示

查看代码

<template>
  <div class="list">
    <p>基本使用，当前index: {{ tabIndex }}</p>
    <h3-tab v-model="tabIndex" @change="change">
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
    </h3-tab>
    <br />
    <p>使用name切换，当前name: {{ tabName }}</p>
    <h3-tab v-model="tabName">
      <h3-tab-item name="item-0">
        标签标签
      </h3-tab-item>
      <h3-tab-item name="item-1">
        标签标签
      </h3-tab-item>
      <h3-tab-item name="item-2">
        标签标签
      </h3-tab-item>
      <h3-tab-item name="item-3">
        标签标签
      </h3-tab-item>
      <h3-tab-item name="item-4">
        标签标签
      </h3-tab-item>
    </h3-tab>
    <br />
    <p>自定义下滑线宽度</p>
    <h3-tab lineWidth="16">
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
    </h3-tab>

    <br />
    <p>超过5个可以滚动</p>
    <h3-tab :index="6">
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
    </h3-tab>

    <br />
    <p>disabled</p>
    <h3-tab>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item>标签标签</h3-tab-item>
      <h3-tab-item disabled>
        标签标签
      </h3-tab-item>
    </h3-tab>
    <br />
    <p>与swiper 结合使用</p>
    <div>
      <h3-tab
        v-model="index"
        lineWidth="16"
        activeColor="#36393e"
        inactiveColor="#898d90"
        lineColor="#0b85f4"
      >
        <h3-tab-item v-for="(item, index1) in list2" :key="index1" @click="demo2 = item">
          {{ item }}
        </h3-tab-item>
      </h3-tab>
      <h3-swiper v-model="index">
        <h3-swiper-item v-for="(item, index2) in list2" :key="index2">
          <div class="swiper">
            {{ item }} 内容
          </div>
        </h3-swiper-item>
      </h3-swiper>
    </div>

    <br />
    <div class="box">
      <h3-button
        :disabled="list2.length === 5"
        inline
        type="primary"
        @click="addTab"
      >
        添加一个
      </h3-button>
      <h3-button
        :disabled="list2.length <= 2"
        inline
        type="primary"
        @click="removeTab"
      >
        移除一个
      </h3-button>
      <h3-button inline type="primary" @click="next">
        下一个
      </h3-button>
      <h3-button inline type="primary" @click="prev">
        上一个
      </h3-button>
    </div>
  </div>
</template>

<script>
import { H3Tab, H3TabItem } from '@/components/h3-tab/';
import H3Button from '@/components/h3-button/';
import { H3Swiper, H3SwiperItem } from '@/components/h3-swiper';

const list = () => ['精选', '美食', '电影', '酒店', '外卖'];

export default {
  components: {
    H3Tab,
    H3TabItem,
    H3Button,
    H3Swiper,
    H3SwiperItem,
  },
  data () {
    return {
      tabIndex: 0,
      tabName: 'item-0',
      list2: list(),
      demo2: '美食',
      index: 0,
    };
  },
  methods: {
    change (index) {
      console.log('change', index);
    },
    addTab () {
      if (this.list2.length < 5) {
        this.list2 = list().slice(0, this.list2.length + 1);
      }
    },
    removeTab () {
      if (this.list2.length > 1) {
        if (this.list2.length - 2 < this.index) {
          this.index = this.list2.length - 2;
        }
        this.list2 = list().slice(0, this.list2.length - 1);
      }
    },
    next () {
      if (this.index === this.list2.length - 1) {
        this.index = 0;
      } else {
        this.index += 1;
      }
    },
    prev () {
      if (this.index === 0) {
        this.index = this.list2.length - 1;
      } else {
        this.index -= 1;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  .swiper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    font-size: 20px;
    background: #fff;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

旧组件库组件存在重复组件，弃用了h3-tab-flow组件，并将其主要功能(多标签滚动)合并到h3-tab。

为了更加灵活使用，移除了h3-tab-item内置的badge功能。

若要做迁移请参考

1. 弃用的props：lineWidth disabledColor customBarWidth animate height preventDefault activeClass badgeLabel badgeBackground badgeColor preventDefault

2. 替换的props：

   • barActiveColor => lineColor
   • defaultColor => inactiveColor
   • borderBottom => border

3. 新增的props：duration

4. 弃用原来所有的事件

API - H3Tab

Props - H3Tab

参数	说明	类型	默认值
index	当前显示的 swipeItem 索引 或 item的 name，v-model绑定值	string|number	0
activeColor	选中标签的颜色	string	#107fff
inactiveColor	未选中标签的颜色	string	#333333
lineColor	标签下划线的颜色	string	#107fff
lineWidth	自定义下滑线宽度	string|number	-
border	是否显示下边框	boolean	true
duration	动画持续时间，单位 ms	string|number	300

Events - H3Tab

事件名	说明	参数
input	v-model绑定事件	value:number|string
change	标签选择变化事件	value:number|string

Function - H3Tab

• 实例方法

方法名	说明	参数
refresh	刷新组件	-

API - H3TabItem

Props - H3TabItem

参数	说明	类型	默认值
name	标签名称，作为匹配的标识符	string	-
disabled	是否可用	Boolean	false

Events - H3TabItem

事件名	说明	参数
click	点击触发事件	-