前端组件库

Appearance

Return to top
On this page

TopTabs 组件示例

示例：

  • 标签1标签1标签1标签1
  • 标签2
  • 标签3
  • 标签4
  • 标签5
  • 标签6
  • 标签7
插槽3
<template>
  <div class="site">
    <lz-top-tabs
      :tagsList="tagsList"
      v-model="currentval"
      @tab-click="tabCLick"
    >
      <div style="width: 80px; height: 30px; background-color: aquamarine;display: flex;justify-content: center;align-items: center;">插槽{{ currentval }}</div>
    </lz-top-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const currentval = ref(3)
const tagsList = ref([
  {
    label: '标签1标签1标签1标签1',
    id: 1
  },
  {
    label: '标签2',
    id: 2
  },
  {
    label: '标签3',
    id: 3
  },
  {
    label: '标签4',
    id: 4
  },
  {
    label: '标签5',
    id: 5
  },
  {
    label: '标签6',
    id: 6
  },
  {
    label: '标签7',
    id: 7
  }
])

const tabCLick = (item: any) => {
  console.log(item)
}

</script>

<style scoped lang="scss"></style>

<template>
  <div class="site">
    <lz-top-tabs
      :tagsList="tagsList"
      v-model="currentval"
      @tab-click="tabCLick"
    >
      <div style="width: 80px; height: 30px; background-color: aquamarine;display: flex;justify-content: center;align-items: center;">插槽{{ currentval }}</div>
    </lz-top-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const currentval = ref(3)
const tagsList = ref([
  {
    label: '标签1标签1标签1标签1',
    id: 1
  },
  {
    label: '标签2',
    id: 2
  },
  {
    label: '标签3',
    id: 3
  },
  {
    label: '标签4',
    id: 4
  },
  {
    label: '标签5',
    id: 5
  },
  {
    label: '标签6',
    id: 6
  },
  {
    label: '标签7',
    id: 7
  }
])

const tabCLick = (item: any) => {
  console.log(item)
}

</script>

<style scoped lang="scss"></style>

组件介绍

TopTabs 是一个顶部标签页组件，支持动态标签列表、标签切换和滚动功能。适用于需要水平导航的场景，如多标签页切换。

属性 (Props)

属性名类型默认值说明
modelValuenumber0当前选中的标签索引
tagsListTag[][]标签列表，每个标签包含 label 属性

方法 (Methods)

方法名参数说明
handleClick(item: Tag, index: number)点击标签时触发，更新选中状态并触发事件

插槽 (Slots)

插槽名说明
默认插槽用于放置标签页内容

事件 (Events)

事件名参数说明
update:modelValuevalue: number更新 modelValue 时触发
tab-click(item: Tag, index: number, tagsList: Tag[])点击标签时触发

样式 (Styles)

组件支持以下样式类：

  • .top-tabs-box: 外层容器
  • .top-tabs-container: 标签容器
  • .top-tabs-item: 标签项
  • .top-tabs-item-active: 当前选中的标签项