Tuniao UI Uniapp V3TnSwitchTab 选项卡切换
该组件用于点击选项之后切换显示不同的内容
组件位置
typescript
import TnSwitchTab from '@tuniao/tnui-vue3-uniapp/components/switch-tab/src/switch-tab.vue'import TnSwitchTab from '@tuniao/tnui-vue3-uniapp/components/switch-tab/src/switch-tab.vue'typescript
import TnSwitchTab from '@/uni_modules/tuniaoui-vue3/components/switch-tab/src/switch-tab.vue'import TnSwitchTab from '@/uni_modules/tuniaoui-vue3/components/switch-tab/src/switch-tab.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
- 通过
v-model绑定当前选中选项卡的索引值 - 通过
tabs传递选项卡的数据，数据格式为字符串数组，数组中的每一项为选项卡的标题
在默认插槽slot中处理对应选中选项卡的内容
vue
<setup lang="ts" setup>
import { ref } from 'vue'
// 当前选中的标签索引
const currentTabIndex = ref(0)
const tabs = ['标签1', '标签2']
</setup>
<template>
<TnSwitchTab v-model="currentTabIndex" :tabs="tabs">
<view v-if="currentTabIndex === 0" class="tn-p">content1</view>
<view v-if="currentTabIndex === 1" class="tn-p">content2</view>
<view v-if="currentTabIndex === 2" class="tn-p">content3</view>
</TnSwitchTab>
</template><setup lang="ts" setup>
import { ref } from 'vue'
// 当前选中的标签索引
const currentTabIndex = ref(0)
const tabs = ['标签1', '标签2']
</setup>
<template>
<TnSwitchTab v-model="currentTabIndex" :tabs="tabs">
<view v-if="currentTabIndex === 0" class="tn-p">content1</view>
<view v-if="currentTabIndex === 1" class="tn-p">content2</view>
<view v-if="currentTabIndex === 2" class="tn-p">content3</view>
</TnSwitchTab>
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| v-model/model-value | 绑定当前激活的标签索引 | Number | 0 | - |
| tabs | 标签名称列表 | String[] | [] | - |
| disabled | 禁止选择 | Boolean | false | true |
| inactive-bg-color | 未选中时标签的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | - | - |
| active-bg-color | 选中时标签的背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | - | - |
| inactive-text-color | 未选中时标签的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
| active-text-color | 选中时标签的字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | - | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 标签切换时触发 | (index: number) => void |