参考Panel标题栏实现,重构TabPage标签布局:添加容器结构确保标题靠左显示、关闭按钮靠右显示

This commit is contained in:
zqm
2025-11-05 15:25:38 +08:00
parent 7e44317b94
commit d4d50af95d

View File

@@ -8,17 +8,21 @@
:class="['tab-item', { 'active': activeTabIndex === index }]" :class="['tab-item', { 'active': activeTabIndex === index }]"
@click="setActiveTab(index)" @click="setActiveTab(index)"
> >
<div class="tab-title">{{ panel.title }}</div> <div class="tab-title-container">
<button <div class="tab-title">{{ panel.title }}</div>
class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" </div>
@click.stop="closeTab(panel.id)" <div class="tab-buttons">
aria-label="关闭" <button
> class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
<svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true"> @click.stop="closeTab(panel.id)"
<line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" /> aria-label="关闭"
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" /> >
</svg> <svg width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
</button> <line x1="2" y1="2" x2="9" y2="9" stroke="#e6efff" stroke-width="1" />
<line x1="2" y1="9" x2="9" y2="2" stroke="#e6efff" stroke-width="1" />
</svg>
</button>
</div>
</div> </div>
<div class="tab-placeholder"></div> <div class="tab-placeholder"></div>
</div> </div>
@@ -116,6 +120,11 @@ const closeTab = (tabId) => {
width: fit-content; width: fit-content;
} }
.tab-title-container {
display: flex;
align-items: center;
}
.tab-title { .tab-title {
text-align: left; text-align: left;
min-width: 0; min-width: 0;
@@ -126,6 +135,11 @@ const closeTab = (tabId) => {
margin-right: 8px; margin-right: 8px;
} }
.tab-buttons {
display: flex;
align-items: center;
}
.tab-item.active { .tab-item.active {
background: #ffffff; background: #ffffff;
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
@@ -146,7 +160,6 @@ const closeTab = (tabId) => {
} }
.button-icon { .button-icon {
margin-right: -8px;
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;