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