Tu View PlusTabs 标签
分隔内容上有关联但属于不同类别的数据集合。
基础用法
标签页的基本使用方法。
标签页内容 1
标签页内容 2
标签页内容 3
<template>
<tu-tabs :default-active-key="1">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template><template>
<tu-tabs :default-active-key="1">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>带图标的标签
通过 title 插槽来实现自定义标签页的内容。
标签页内容 1
标签页内容 2
标签页内容 3
<template>
<tu-tabs :default-active-key="1">
<tu-tab-pane :key="1">
<template #title>
<tu-icon><Apple /></tu-icon>
标签1
</template>
标签页内容 1
</tu-tab-pane>
<tu-tab-pane :key="2">
<template #title>
<tu-icon> <Grape /></tu-icon>
标签2
</template>
标签页内容 2
</tu-tab-pane>
<tu-tab-pane :key="3">
<template #title>
<tu-icon> <Pear /></tu-icon>
标签3
</template>
标签页内容 3
</tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { Apple, Grape, Pear } from '@tu-view-plus/icons-vue';
</script>
<style scoped>
.tu-icon {
margin-right: 4px;
}
</style><template>
<tu-tabs :default-active-key="1">
<tu-tab-pane :key="1">
<template #title>
<tu-icon><Apple /></tu-icon>
标签1
</template>
标签页内容 1
</tu-tab-pane>
<tu-tab-pane :key="2">
<template #title>
<tu-icon> <Grape /></tu-icon>
标签2
</template>
标签页内容 2
</tu-tab-pane>
<tu-tab-pane :key="3">
<template #title>
<tu-icon> <Pear /></tu-icon>
标签3
</template>
标签页内容 3
</tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { Apple, Grape, Pear } from '@tu-view-plus/icons-vue';
</script>
<style scoped>
.tu-icon {
margin-right: 4px;
}
</style>标签页的位置
通过 position 属性可以自定义标签栏的位置。
标签页内容 1
标签页内容 2
标签页内容 3
<template>
<tu-radio-group class="mb-2" v-model="tabPositon" type="button">
<tu-radio label="top">上方</tu-radio>
<tu-radio label="left">左方</tu-radio>
<tu-radio label="right">右方</tu-radio>
<tu-radio label="bottom">下方</tu-radio>
</tu-radio-group>
<tu-tabs :default-active-key="1" :position="tabPositon" style="height: 146px">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tabPositon = ref('top');
</script><template>
<tu-radio-group class="mb-2" v-model="tabPositon" type="button">
<tu-radio label="top">上方</tu-radio>
<tu-radio label="left">左方</tu-radio>
<tu-radio label="right">右方</tu-radio>
<tu-radio label="bottom">下方</tu-radio>
</tu-radio-group>
<tu-tabs :default-active-key="1" :position="tabPositon" style="height: 146px">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tabPositon = ref('top');
</script>不同类型
通过 type 可以设置标签的类型。
标签页内容 1
标签页内容 2
标签页内容 3
<template>
<tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
<tu-radio label="default">默认</tu-radio>
<tu-radio label="flat">扁平</tu-radio>
<tu-radio label="card-outset">上方卡片</tu-radio>
<tu-radio label="card-inset">下方卡片</tu-radio>
<tu-radio label="slider-outset">上方滑动</tu-radio>
<tu-radio label="slider-inset">下方滑动</tu-radio>
<tu-radio label="text">文字</tu-radio>
<tu-radio label="button">按钮</tu-radio>
<tu-radio label="button-round">圆形按钮</tu-radio>
</tu-radio-group>
<tu-tabs :default-active-key="1" :type="tabType" style="height: 130px">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tabType = ref('default');
</script><template>
<tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
<tu-radio label="default">默认</tu-radio>
<tu-radio label="flat">扁平</tu-radio>
<tu-radio label="card-outset">上方卡片</tu-radio>
<tu-radio label="card-inset">下方卡片</tu-radio>
<tu-radio label="slider-outset">上方滑动</tu-radio>
<tu-radio label="slider-inset">下方滑动</tu-radio>
<tu-radio label="text">文字</tu-radio>
<tu-radio label="button">按钮</tu-radio>
<tu-radio label="button-round">圆形按钮</tu-radio>
</tu-radio-group>
<tu-tabs :default-active-key="1" :type="tabType" style="height: 130px">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tabType = ref('default');
</script>懒加载
通过设置 lazy-load 属性，可以让面板在首次激活时渲染。
标签页内容 1
<template>
<tu-tabs :default-active-key="1" :lazy-load="true">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template><template>
<tu-tabs :default-active-key="1" :lazy-load="true">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>附加内容
通过 extra 插槽可以自定义额外显示内容。
标签页内容 1
标签页内容 2
标签页内容 3
<template>
<tu-tabs :default-active-key="1">
<template #extra>
<tu-button size="mini">添加</tu-button>
</template>
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template><template>
<tu-tabs :default-active-key="1">
<template #extra>
<tu-button size="mini">添加</tu-button>
</template>
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>动态增减标签页
通过设置 editable 为 true 可以开启动态增减标签页。
标签页内容 1
标签页内容 2
标签页内容 3
标签页内容 4
<template>
<tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
<tu-radio label="default">默认</tu-radio>
<tu-radio label="flat">扁平</tu-radio>
<tu-radio label="card-outset">上方卡片</tu-radio>
<tu-radio label="card-inset">下方卡片</tu-radio>
<tu-radio label="slider-outset">上方滑动</tu-radio>
<tu-radio label="slider-inset">下方滑动</tu-radio>
<tu-radio label="text">文字</tu-radio>
<tu-radio label="button">按钮</tu-radio>
<tu-radio label="button-round">圆形按钮</tu-radio>
</tu-radio-group>
<tu-tabs
v-model="tabValue"
:type="tabType"
editable
show-add-button
auto-switch
@add="handleAdd"
@delete="handleDelete"
>
<tu-tab-pane
v-for="(item, index) in tabData"
:key="item.key"
:title="`标签${item.key}`"
:closable="index !== 0"
>
{{ `标签页内容 ${item.key}` }}
</tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tabType = ref('default');
const tabData = ref([{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }]);
const tabValue = ref(1);
const handleAdd = () => {
const count = tabData.value.length + 1;
tabData.value = [...tabData.value, { key: count }];
};
const handleDelete = (key: number) => {
if (key === tabValue.value) {
const targetIndex = tabData.value.findIndex((i) => i.key === key);
tabValue.value = tabData.value[targetIndex - 1].key;
}
tabData.value = tabData.value.filter((i) => i.key !== key);
};
</script><template>
<tu-radio-group class="mb-2" v-model="tabType" type="button" size="small">
<tu-radio label="default">默认</tu-radio>
<tu-radio label="flat">扁平</tu-radio>
<tu-radio label="card-outset">上方卡片</tu-radio>
<tu-radio label="card-inset">下方卡片</tu-radio>
<tu-radio label="slider-outset">上方滑动</tu-radio>
<tu-radio label="slider-inset">下方滑动</tu-radio>
<tu-radio label="text">文字</tu-radio>
<tu-radio label="button">按钮</tu-radio>
<tu-radio label="button-round">圆形按钮</tu-radio>
</tu-radio-group>
<tu-tabs
v-model="tabValue"
:type="tabType"
editable
show-add-button
auto-switch
@add="handleAdd"
@delete="handleDelete"
>
<tu-tab-pane
v-for="(item, index) in tabData"
:key="item.key"
:title="`标签${item.key}`"
:closable="index !== 0"
>
{{ `标签页内容 ${item.key}` }}
</tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const tabType = ref('default');
const tabData = ref([{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }]);
const tabValue = ref(1);
const handleAdd = () => {
const count = tabData.value.length + 1;
tabData.value = [...tabData.value, { key: count }];
};
const handleDelete = (key: number) => {
if (key === tabValue.value) {
const targetIndex = tabData.value.findIndex((i) => i.key === key);
tabValue.value = tabData.value[targetIndex - 1].key;
}
tabData.value = tabData.value.filter((i) => i.key !== key);
};
</script>触发方式
通过 trigger 指定触发方式。
标签页内容 1
标签页内容 2
标签页内容 3
<template>
<tu-radio-group class="mb-2" v-model="trigger" type="button">
<tu-radio label="click">点击</tu-radio>
<tu-radio label="hover">悬停</tu-radio>
</tu-radio-group>
<tu-tabs :default-active-key="1" :trigger="trigger">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const trigger = ref('click');
</script><template>
<tu-radio-group class="mb-2" v-model="trigger" type="button">
<tu-radio label="click">点击</tu-radio>
<tu-radio label="hover">悬停</tu-radio>
</tu-radio-group>
<tu-tabs :default-active-key="1" :trigger="trigger">
<tu-tab-pane :key="1" title="标签1"> 标签页内容 1 </tu-tab-pane>
<tu-tab-pane :key="2" title="标签2"> 标签页内容 2 </tu-tab-pane>
<tu-tab-pane :key="3" title="标签3"> 标签页内容 3 </tu-tab-pane>
</tu-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const trigger = ref('click');
</script>Tabs API
Tabs Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| active-key/v-model | 当前选中的标签的 key | String Number | - |
| default-active-key | 默认选中的标签的 key（非受控状态，为空时选中第一个标签页） | String Number | - |
| position | 标签页的位置 | String | top |
| type | 标签页的类型 | String | default |
| direction | 标签页的方向 | String | horizontal |
| editable | 是否开启可编辑模式 | Boolean | false |
| show-add-button | 是否显示增加按钮（仅在可编辑模式可用） | Boolean | false |
| destroy-on-hide | 是否在不显示标签时销毁内容 | Boolean | false |
| lazy-load | 是否在首次展示标签时挂载内容 | Boolean | false |
| justify | 高度撑满容器，只在水平模式下生效。 | Boolean | false |
| animation | 是否开启选项内容过渡动画 | Boolean | false |
| header-padding | 标签页头部是否存在水平边距。 | Boolean | true |
| auto-switch | 创建标签后是否切换到新标签（最后一个） | Boolean | false |
| hide-content | 是否隐藏内容 | Boolean | false |
| trigger | 触发方式 | String | click |
Tabs Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 当前标签值改变时触发 | Function |
| tab-click | 用户点击标签时触发 | Function |
| add | 用户点击增加按钮时触发 | - |
| delete | 用户点击删除按钮时触发 | Function |
Tabs Slots
| 参数名 | 描述 |
|---|---|
| extra | 标签页额外内容 |
Tab-Pane API
Tab-Pane Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 选项卡的标题 | String | - |
| disabled | 是否禁用 | Boolean | false |
| closable | 是否允许关闭此选项卡（仅在可编辑模式生效） | Boolean | true |
| destroy-on-hide | 是否在不显示标签时销毁内容 | Boolean | false |
Tab-Pane Slots
| 参数名 | 描述 |
|---|---|
| title | 选项卡标题 |