TabPage.vue 支持页标签在下

This commit is contained in:
zqm
2026-01-07 09:00:28 +08:00
parent 50e3704905
commit 23474a7882
3 changed files with 48 additions and 5 deletions

View File

@@ -199,6 +199,30 @@ const isSinglePanel = computed(() => {
return false; return false;
}); });
// 计算属性是否是只有一个TabPage且有多个Panel的情况
const isSingleTabPageWithMultiplePanels = computed(() => {
// 检查children配置
if (props.children) {
const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
// 只有一个child且是TabPage
if (childrenArray.length === 1 && childrenArray[0].type === 'TabPage') {
const tabPage = childrenArray[0];
const tabPageChildren = tabPage.children;
if (tabPageChildren) {
const tabPageChildrenArray = Array.isArray(tabPageChildren) ? tabPageChildren : [tabPageChildren];
// TabPage包含多个Panel
return tabPageChildrenArray.length > 1;
}
}
}
// 默认不是
return false;
});
// 计算属性:是否显示标题栏 // 计算属性:是否显示标题栏
const shouldShowTitleBar = computed(() => { const shouldShowTitleBar = computed(() => {
// 基础条件props.showTitleBar为true // 基础条件props.showTitleBar为true
@@ -207,6 +231,9 @@ const shouldShowTitleBar = computed(() => {
// 单面板场景不显示标题栏 // 单面板场景不显示标题栏
if (isSinglePanel.value) return false; if (isSinglePanel.value) return false;
// 只有一个TabPage且有多个Panel的情况不显示标题栏
if (isSingleTabPageWithMultiplePanels.value) return false;
// 检查children配置 // 检查children配置
if (props.children) { if (props.children) {
const childrenArray = Array.isArray(props.children) ? props.children : [props.children]; const childrenArray = Array.isArray(props.children) ? props.children : [props.children];

View File

@@ -713,6 +713,7 @@ const addFloatingPanel = (panel) => {
// 使用children结构以兼容Render组件的渲染逻辑 // 使用children结构以兼容Render组件的渲染逻辑
children: { children: {
type: 'TabPage', type: 'TabPage',
tabPosition: 'bottom',
children: [ children: [
{ {
...safePanel, ...safePanel,

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="tab-page" :class="[`tab-page-${tabPosition}`]" style="width: 100%; height: 100%;"> <div class="tab-page" :class="[`tab-page-${adjustedTabPosition}`]" style="width: 100%; height: 100%;">
<!-- 顶部标签栏 --> <!-- 顶部标签栏 -->
<div v-if="tabPosition === 'top' && shouldShowTabs" class="tab-header tab-header-horizontal"> <div v-if="adjustedTabPosition === 'top' && shouldShowTabs" class="tab-header tab-header-horizontal">
<div <div
v-for="(item, index) in slotItems" v-for="(item, index) in slotItems"
:key="index" :key="index"
@@ -29,7 +29,7 @@
</div> </div>
<!-- 左侧标签栏 --> <!-- 左侧标签栏 -->
<div v-if="tabPosition === 'left' && shouldShowTabs" class="tab-header tab-header-vertical tab-header-left"> <div v-if="adjustedTabPosition === 'left' && shouldShowTabs" class="tab-header tab-header-vertical tab-header-left">
<div <div
v-for="(item, index) in slotItems" v-for="(item, index) in slotItems"
:key="index" :key="index"
@@ -57,7 +57,7 @@
</div> </div>
<!-- 右侧标签栏 --> <!-- 右侧标签栏 -->
<div v-if="tabPosition === 'right' && shouldShowTabs" class="tab-header tab-header-vertical tab-header-right"> <div v-if="adjustedTabPosition === 'right' && shouldShowTabs" class="tab-header tab-header-vertical tab-header-right">
<div <div
v-for="(item, index) in slotItems" v-for="(item, index) in slotItems"
:key="index" :key="index"
@@ -102,7 +102,7 @@
</div> </div>
<!-- 底部标签栏 - 移动到最后确保在底部显示 --> <!-- 底部标签栏 - 移动到最后确保在底部显示 -->
<div v-if="tabPosition === 'bottom' && shouldShowTabs" class="tab-header tab-header-horizontal tab-header-bottom"> <div v-if="adjustedTabPosition === 'bottom' && shouldShowTabs" class="tab-header tab-header-horizontal tab-header-bottom">
<div <div
v-for="(item, index) in slotItems" v-for="(item, index) in slotItems"
:key="index" :key="index"
@@ -189,6 +189,21 @@ const activeChild = computed(() => {
return childrenArray[activeTabIndex.value] return childrenArray[activeTabIndex.value]
}) })
// 计算属性:动态调整标签页位置
const adjustedTabPosition = computed(() => {
// 检查是否有多个Panel
const childrenArray = Array.isArray(props.children) ? props.children : [props.children]
const hasMultiplePanels = childrenArray.length > 1
// 如果有多个Panel且当前位置是top则改为bottom
if (hasMultiplePanels && props.tabPosition === 'top') {
return 'bottom'
}
// 其他情况保持原位置
return props.tabPosition
})
// 设置激活的标签页 // 设置激活的标签页
const setActiveTab = (index) => { const setActiveTab = (index) => {
if (!props.children) return if (!props.children) return