Skip to main content

Tabs 标签页

何时使用​

提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

  • 适合水平点击切换隐藏展示多标签;
  • 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。

代码演示​

horizontal demo

代码
<template>
  <div style="width: 400px; height: 100px; border: 1px solid #ccc;">
    <erTabs 
      :tabList="tabList"
      :activateTab="activateTab"
      :outStyleContent="{padding: '20px'}"
      @onSwitchTab="handleSwitchTab"
    >
      <div 
        v-for="tab in tabList" 
        :key="tab.id" 
        v-show="activateTab === tab.id"
      >
        我是{{ tab.label }}页内容
      </div>
    </erTabs>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const activateTab = ref<Number>(0)
  const handleSwitchTab = (tab:any) => {
    activateTab.value = tab.id
    console.log(tab)
  }
  const tabList = [
    {id: 0, label: 'Tab 1'},
    {id: 1, label: 'Tab 2'},
  ]
</script>

API​

Attributes​

属性名说明类型默认值
tabListflex 主轴的方向是否垂直，使用 flex-direction: rowbooleanfalse
outStyleContainer自定义组件最外层元素样式Object—
outStyleMenu自定义标签栏元素样式Object—
outStyleItem自定义各个标签元素样式Object—
outStyleContent自定义标签内容元素样式Object—

Events​

事件名说明类型
@onSwitchTab切换标签点击事件, 返回当前标签的tabList值为第一个参数.Function

Slots​

插槽名说明
—默认插槽: 当前tabs标签的内容