参考Panel标题栏实现,重构TabPage标签布局:添加容器结构确保标题靠左显示、关闭按钮靠右显示
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user