Tab 标签

使用指南

用于收纳和展示多个并列的内容，并支持不同内容视图之间快速切换。

规则

标签页分为两个类型：通栏标签页和滚动标签页

• 通栏标签页
  1. 标签宽度按数量等分划分，支持2-4个标签页。
  2. 标签命名应保持简洁，字数控制在2-5个，超出省略。
• 滚动标签页
  1. 适用于收纳标签页数量较多的场景，可以通过左右滑动查找并选择标签页。
  2. 标签页显示支持一定长度的标签命名，单个标签页字数显示支持2-20个，超出省略。

代码演示

查看代码

<template>
  <div class="list">
    <p>通栏标签页</p>
    <h3-tab>
      <h3-tab-item>选中标签页</h3-tab-item>
      <h3-tab-item>未选中标签页</h3-tab-item>
    </h3-tab>
    <br />
    <h3-tab :index="2">
      <h3-tab-item>选中标签页</h3-tab-item>
      <h3-tab-item>未选标签页</h3-tab-item>
      <h3-tab-item>未选标签页</h3-tab-item>
    </h3-tab>
    <br />
    <h3-tab>
      <h3-tab-item>选中标签页</h3-tab-item>
      <h3-tab-item>未选标签页</h3-tab-item>
      <h3-tab-item>未选标签页</h3-tab-item>
      <h3-tab-item disabled>
        失效标签页
      </h3-tab-item>
    </h3-tab>
    <br />

    <p>滚动标签页</p>
    <h3-tab type="scroll">
      <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 />
    <h3-tab type="scroll" :index="4">
      <h3-tab-item>标签项名称最大的长度限制应不超过二十个字</h3-tab-item>
      <h3-tab-item>标签标签1111</h3-tab-item>
      <h3-tab-item>标签标签1</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>图标标签页</p>
    <h3-tab>
      <h3-tab-item icon="IconHomeStroke">
        选中标签页
      </h3-tab-item>
      <h3-tab-item icon="IconHomeStroke">
        未选中标签页
      </h3-tab-item>
      <h3-tab-item icon="IconHomeStroke" disabled>
        失效标签页
      </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="#315EFB"
        inactiveColor="#121933"
        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 === 4"
        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 < 4) {
        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>

与thinking-ui 2.0版组件的区别以及迁移

按照新的Tab 标签页组件规范修改相关样式

若要做迁移请参考

1. Tab 新增的props：type
2. TabItem 新增的props: icon

API - H3Tab

Props - H3Tab

参数	说明	类型	默认值
index	当前显示的 swipeItem 索引 或 item的 name，v-model绑定值	string|number	0
activeColor	选中标签的颜色	string	#315EFB
inactiveColor	未选中标签的颜色	string	#121933
lineColor	标签下划线的颜色	string	#315EFB
lineWidth	自定义下滑线宽度	string|number	24
duration	动画持续时间，单位 ms	string|number	300
type	标签栏页类型，分为通栏标签页 banner 和滚动标签页 scroll	string	banner

Events - H3Tab

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

Function - H3Tab

• 实例方法

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

API - H3TabItem

Props - H3TabItem

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

Events - H3TabItem

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