Tantalum UI

Appearance

Return to top
On this page

TabView/TabViewItem 标签页

vue
<template>
  <ta-group title="基础用法">
    <ta-tab-view class="exp-tabView" v-model="value" @change="onChange" ref="tabViewRef">
      <ta-tab-view-item name="Tab 1">
        <ta-scroll-view
          class="exp-tabView-scroll-view"
          :enable-pull-directions="['down']"
          scroll-y
          scroll-x
          @refreshing="onRefreshing"
        >
          <ta-empty class="exp-tabView-empty" description="Tab 1 下拉刷新"></ta-empty>
        </ta-scroll-view>
      </ta-tab-view-item>
      <ta-tab-view-item name="Tab 2">
        <ta-empty class="exp-tabView-empty" description="Tab 2"></ta-empty
      ></ta-tab-view-item>
    </ta-tab-view>
  </ta-group>
  <ta-group title="垂直">
    <ta-tab-view class="exp-tabView" :initialVertical="true" :scrollThreshold="1">
      <ta-tab-view-item name="Tab 1">
        <ta-scroll-view
          class="exp-tabView-scroll-view"
          :enable-pull-directions="['down']"
          scroll-y
          @refreshing="onRefreshing"
        >
          <ta-empty class="exp-tabView-empty" description="Tab 1 下拉刷新"></ta-empty>
        </ta-scroll-view>
      </ta-tab-view-item>
      <ta-tab-view-item name="Tab 2">
        <ta-empty class="exp-tabView-empty" description="Tab 2"></ta-empty>
      </ta-tab-view-item>
    </ta-tab-view>
  </ta-group>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, shallowRef } from 'vue'
import type { ScrollViewOnRefreshing, TabViewOnChange, TabViewRef } from '@/index'

export default defineComponent({
  name: 'ExpTabView',
  setup() {
    const tabViewRef = shallowRef<TabViewRef | null>(null)
    const value = ref('')

    const onRefreshing: ScrollViewOnRefreshing = (res, done) => {
      setTimeout(() => {
        done()
      }, 2000)
    }

    const onChange: TabViewOnChange = (name, index) => {
      console.log('change', name, index)
    }

    onMounted(() => {
      // tabViewRef.value?.switchTo(0)
    })

    return {
      tabViewRef,
      value,
      onRefreshing,
      onChange
    }
  }
})
</script>

Import

js
import { TaTabView, TaTabViewItem } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Import Type

组件导出的类型定义：

ts
import type { TabViewOnChange, TabViewOnAnimated, TabViewRef } from 'tantalum-ui-mobile'

TabView

TabView Props

属性类型默认值必填说明
initial-verticalbooleanfalse否初始化是否侧边菜单展示方式
scroll-thresholdnumber4否超过 scrollThreshold 个 Tab 使用滚动形式
back-upper-when-changebooleanfalse否切换面板时，如果是旧面板，是否返回顶部/左侧位置

TabView Events

事件描述回调函数参数TypeScript 函数
change切换时触发(name: string, activeIndex: number)TabViewOnChange
animated动画结束时触发(activeIndex: number)TabViewOnAnimated

TabView Slots

#default

注：其中只可放置 TabViewItem 组件，否则会导致未定义的行为。

vue
<ta-tab-view>
  <ta-tab-view-item name="Tab 1">
    <ta-empty description="Tab 1"/>
  </ta-tab-view-item>
  <ta-tab-view-item name="Tab 2">
    <ta-empty description="Tab 1" />
  </ta-tab-view-item>
</ta-tab-view>

Methods

ts
interface TabViewRef {
  switchTo: (name: string) => void
  switchToIndex: (index: number) => void
}
方法名说明
switchTo切换到指定 name 的 Tab
switchToIndex切换到指定索引的 Tab

TabViewItem

TabViewItem Props

属性类型默认值必填说明
namestring是对应的菜单名称

TabViewItem Slots

内容（#default）

vue
<ta-tab-view-item name="Tab 1">
  <ta-empty description="Tab 1"/>
</ta-tab-view-item>