指南组件定制

Tabs 标签页

用于在多个内容面板之间切换的导航组件

sKy
@skiyee
Source 
<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <SkTabs v-model="activeIndex">
    <SkTab label="标签一">
      <view class="p-4">内容一</view>
    </SkTab>
    <SkTab label="标签二">
      <view class="p-4">内容二</view>
    </SkTab>
    <SkTab label="标签三">
      <view class="p-4">内容三</view>
    </SkTab>
  </SkTabs>
</template>

用法

DefaultValue 默认激活

Prop类型默认值描述
defaultValuenumber0默认激活的标签索引（非受控模式）
<template>
  <SkTabs :default-value="1">
    <SkTab label="标签一">
      <view class="p-4">内容一</view>
    </SkTab>
    <SkTab label="标签二">
      <view class="p-4">内容二（默认激活）</view>
    </SkTab>
    <SkTab label="标签三">
      <view class="p-4">内容三</view>
    </SkTab>
  </SkTabs>
</template>

Controlled 受控模式

Prop类型默认值描述
v-modelnumber-当前激活的标签索引，支持 v-model 双向绑定
<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)

function switchToSecondTab() {
  activeIndex.value = 1
}
</script>

<template>
  <view class="flex flex-col gap-3 p-4">
    <SkButton label="切换到第二个标签" @click="switchToSecondTab" />
    
    <SkTabs v-model="activeIndex">
      <SkTab label="标签一">
        <view class="p-4">内容一</view>
      </SkTab>
      <SkTab label="标签二">
        <view class="p-4">内容二</view>
      </SkTab>
      <SkTab label="标签三">
        <view class="p-4">内容三</view>
      </SkTab>
    </SkTabs>
  </view>
</template>

Scrollable 横向滚动

Prop类型默认值描述
scrollablebooleanfalse是否可横向滚动
<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <SkTabs v-model="activeIndex" scrollable>
    <SkTab 
      v-for="i in 10" 
      :key="i" 
      :label="`标签${i}`"
    >
      <view class="p-4">内容 {{ i }}</view>
    </SkTab>
  </SkTabs>
</template>

LineWidth 指示器宽度

Prop类型默认值描述
lineWidthnumber | 'auto''auto'指示器宽度（px）
<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <view class="flex flex-col gap-4 p-4">
    <view>
      <text class="text-sm text-label mb-2">自动宽度（默认）</text>
      <SkTabs v-model="activeIndex" line-width="auto">
        <SkTab label="标签一">内容一</SkTab>
        <SkTab label="标签二">内容二</SkTab>
      </SkTabs>
    </view>

    <view>
      <text class="text-sm text-label mb-2">固定宽度</text>
      <SkTabs v-model="activeIndex" :line-width="60">
        <SkTab label="标签一">内容一</SkTab>
        <SkTab label="标签二">内容二</SkTab>
      </SkTabs>
    </view>

  </view>
</template>

Animated 切换动画

Prop类型默认值描述
animatedbooleantrue是否启用切换动画
<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <view class="flex flex-col gap-4 p-4">
    <view>
      <text class="text-sm text-label mb-2">启用动画（默认）</text>
      <SkTabs v-model="activeIndex" :animated="true">
        <SkTab label="标签一">内容一</SkTab>
        <SkTab label="标签二">内容二</SkTab>
      </SkTabs>
    </view>

    <view>
      <text class="text-sm text-label mb-2">禁用动画</text>
      <SkTabs v-model="activeIndex" :animated="false">
        <SkTab label="标签一">内容一</SkTab>
        <SkTab label="标签二">内容二</SkTab>
      </SkTabs>
    </view>
  </view>
</template>

Disabled 禁用状态

Prop类型默认值描述
disabledbooleanfalse是否禁用整个标签页
<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref(0)
</script>

<template>
  <view class="flex flex-col gap-4 p-4">
    <view>
      <text class="text-sm text-label mb-2">禁用整个标签页</text>
      <SkTabs v-model="activeIndex" disabled>
        <SkTab label="标签一">内容一</SkTab>
        <SkTab label="标签二">内容二</SkTab>
      </SkTabs>
    </view>

    <view>
      <text class="text-sm text-label mb-2">禁用单个标签</text>
      <SkTabs v-model="activeIndex">
        <SkTab label="正常标签">内容一</SkTab>
        <SkTab label="禁用标签" disabled>内容二</SkTab>
        <SkTab label="正常标签">内容三</SkTab>
      </SkTabs>
    </view>
  </view>
</template>

用法 (Tab)

Label 标签文本

Prop类型默认值描述
labelstring-标签文本

监听切换事件

通过监听 change 和 click 事件可以在标签切换时执行自定义逻辑。

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

const activeIndex = ref(0)

function handleChange(index: number) {
  console.log('切换到标签：', index)
  uni.showToast({
    title: `切换到标签 ${index + 1}`,
    icon: 'none'
  })
}

function handleClick(index: number) {
  console.log('点击了标签：', index)
}
</script>

<template>
  <SkTabs 
    v-model="activeIndex" 
    @change="handleChange"
    @click="handleClick"
  >
    <SkTab label="标签一">
      <view class="p-4">内容一</view>
    </SkTab>
    <SkTab label="标签二">
      <view class="p-4">内容二</view>
    </SkTab>
    <SkTab label="标签三">
      <view class="p-4">内容三</view>
    </SkTab>
  </SkTabs>
</template>

接口 (Tabs)

Props

属性名类型默认值描述
v-modelnumber-详见 Controlled 受控模式
defaultValuenumber0详见 DefaultValue 默认激活
scrollablebooleanfalse详见 Scrollable 横向滚动
lineWidthnumber | 'auto''auto'详见 LineWidth 指示器宽度
animatedbooleantrue详见 Animated 切换动画
disabledbooleanfalse详见 Disabled 禁用状态
claxSkTabsUcvProps['clax']-用于扩展当前基础样式

Emits

事件名参数描述
change(index: number)切换标签时触发
click(index: number)点击标签时触发

Slots

插槽名说明
default标签内容，放置 SkTab 组件

接口 (Tab)

Props

属性名类型默认值描述
labelstring-详见 Label 标签文本
disabledbooleanfalse是否禁用该标签

Slots

插槽名说明
default标签面板内容

交互

正在完善中，敬请期待！😊

Copyright © sKy(skiyee) 2025-present