简化TabPage标签布局:使用tab-spacer元素占据中间空间,实现标题靠左显示、关闭按钮靠右显示

This commit is contained in:
zqm
2025-11-05 15:38:25 +08:00
parent 5c6a6c8d5a
commit 721643cce4

View File

@@ -8,11 +8,8 @@
:class="['tab-item', { 'active': activeTabIndex === index }]" :class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)" @click="setActiveTab(index)"
> >
<div class="flex items-center justify-between w-full"> <span class="tab-title">{{ panel.title }}</span>
<div class="tab-title-container"> <span class="tab-spacer"></span>
<span class="tab-title-text">{{ panel.title }}</span>
</div>
<div class="tab-buttons-container">
<button <button
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click.stop="closeTab(panel.id)" @click.stop="closeTab(panel.id)"
@@ -24,8 +21,6 @@
</svg> </svg>
</button> </button>
</div> </div>
</div>
</div>
<div class="tab-placeholder"></div> <div class="tab-placeholder"></div>
</div> </div>
<!-- Tab页内容区域 --> <!-- Tab页内容区域 -->
@@ -121,24 +116,18 @@ const closeTab = (tabId) => {
width: fit-content; width: fit-content;
} }
.tab-title-container { .tab-title {
display: flex;
align-items: center;
flex: 1;
margin-right: 8px;
}
.tab-title-text {
text-align: left; text-align: left;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: 8px;
} }
.tab-buttons-container { .tab-spacer {
display: flex; flex: 1;
align-items: center; min-width: 0;
} }
.tab-item.active { .tab-item.active {