修改左侧页标签的显示问题
This commit is contained in:
@@ -871,7 +871,7 @@ const addFloatingPanel = (panel) => {
|
|||||||
// 使用children结构以兼容Render组件的渲染逻辑
|
// 使用children结构以兼容Render组件的渲染逻辑
|
||||||
children: {
|
children: {
|
||||||
type: 'TabPage',
|
type: 'TabPage',
|
||||||
tabPosition: 'bottom',
|
tabPosition: 'left',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
...safePanel,
|
...safePanel,
|
||||||
|
|||||||
@@ -5,18 +5,7 @@
|
|||||||
v-bind="componentProps"
|
v-bind="componentProps"
|
||||||
:style="combinedStyle"
|
:style="combinedStyle"
|
||||||
>
|
>
|
||||||
<!-- 统一处理children属性,不区分组件类型,只要有children就渲染 -->
|
<!-- 移除递归渲染,由各个组件自己处理children -->
|
||||||
<template v-if="config.children">
|
|
||||||
<!-- 统一处理children为数组或单个对象的情况 -->
|
|
||||||
<div v-for="child in Array.isArray(config.children) ? config.children : [config.children]" :key="child.id" style="width: 100%; height: 100%;">
|
|
||||||
<Render
|
|
||||||
:type="child.type"
|
|
||||||
:config="child"
|
|
||||||
:debug="debug"
|
|
||||||
:style="child.style"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</component>
|
</component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@@ -191,16 +191,8 @@ const activeChild = computed(() => {
|
|||||||
|
|
||||||
// 计算属性:动态调整标签页位置
|
// 计算属性:动态调整标签页位置
|
||||||
const adjustedTabPosition = computed(() => {
|
const adjustedTabPosition = computed(() => {
|
||||||
// 检查是否有多个Panel
|
// 直接返回配置的标签页位置,不进行额外转换
|
||||||
const childrenArray = Array.isArray(props.children) ? props.children : [props.children]
|
// 确保所有位置都能正确处理多个Panel
|
||||||
const hasMultiplePanels = childrenArray.length > 1
|
|
||||||
|
|
||||||
// 如果有多个Panel且当前位置是top,则改为bottom
|
|
||||||
if (hasMultiplePanels && props.tabPosition === 'top') {
|
|
||||||
return 'bottom'
|
|
||||||
}
|
|
||||||
|
|
||||||
// 其他情况保持原位置
|
|
||||||
return props.tabPosition
|
return props.tabPosition
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -388,6 +380,7 @@ onUnmounted(() => {
|
|||||||
/* 垂直标签栏样式 */
|
/* 垂直标签栏样式 */
|
||||||
.tab-header-vertical {
|
.tab-header-vertical {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
width: 28px;
|
width: 28px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -397,7 +390,6 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-header-right {
|
.tab-header-right {
|
||||||
flex-direction: column;
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
}
|
}
|
||||||
@@ -460,7 +452,7 @@ onUnmounted(() => {
|
|||||||
/* 垂直标签项样式 */
|
/* 垂直标签项样式 */
|
||||||
.tab-item-vertical {
|
.tab-item-vertical {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
background: linear-gradient(to right, var(--vs-blue-top), var(--vs-blue-bottom));
|
background: linear-gradient(to right, var(--vs-blue-top), var(--vs-blue-bottom));
|
||||||
border-radius: 3px 0 0 3px;
|
border-radius: 3px 0 0 3px;
|
||||||
@@ -486,7 +478,7 @@ onUnmounted(() => {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin: 0 4px;
|
margin: 0 6px;
|
||||||
writing-mode: vertical-rl;
|
writing-mode: vertical-rl;
|
||||||
text-orientation: mixed;
|
text-orientation: mixed;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user