TabPage.vue 支持页标签在下
This commit is contained in:
@@ -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];
|
||||||
|
|||||||
@@ -713,6 +713,7 @@ const addFloatingPanel = (panel) => {
|
|||||||
// 使用children结构以兼容Render组件的渲染逻辑
|
// 使用children结构以兼容Render组件的渲染逻辑
|
||||||
children: {
|
children: {
|
||||||
type: 'TabPage',
|
type: 'TabPage',
|
||||||
|
tabPosition: 'bottom',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
...safePanel,
|
...safePanel,
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user