mirror of
https://github.com/1Panel-dev/1Panel.git
synced 2025-10-11 07:55:59 +08:00
style: Handle overflow for node names with ellipsis truncation (#9360)
This commit is contained in:
parent
ba6a4fe6d7
commit
810ea9c421
1 changed files with 9 additions and 5 deletions
|
@ -14,7 +14,7 @@
|
||||||
<el-badge is-dot :value="taskCount" :show-zero="false" :offset="[5, 5]">
|
<el-badge is-dot :value="taskCount" :show-zero="false" :offset="[5, 5]">
|
||||||
<el-button link @click="openChangeNode" @mouseenter="openChangeNode">
|
<el-button link @click="openChangeNode" @mouseenter="openChangeNode">
|
||||||
<SvgIcon class="icon" iconName="p-gerenzhongxin1" />
|
<SvgIcon class="icon" iconName="p-gerenzhongxin1" />
|
||||||
{{ loadCurrentName() }}
|
<span class="ellipsis-text">{{ loadCurrentName() }}</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-badge>
|
</el-badge>
|
||||||
</div>
|
</div>
|
||||||
|
@ -121,11 +121,8 @@ const loadCurrentName = () => {
|
||||||
if (globalStore.currentNode === 'local') {
|
if (globalStore.currentNode === 'local') {
|
||||||
return i18n.global.t('xpack.node.master');
|
return i18n.global.t('xpack.node.master');
|
||||||
}
|
}
|
||||||
if (globalStore.currentNode.length <= 15) {
|
|
||||||
return globalStore.currentNode;
|
return globalStore.currentNode;
|
||||||
}
|
}
|
||||||
return globalStore.currentNode.substring(0, 12) + '...';
|
|
||||||
}
|
|
||||||
return i18n.global.t('xpack.node.master');
|
return i18n.global.t('xpack.node.master');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -315,4 +312,11 @@ onMounted(() => {
|
||||||
.dropdown-item:hover {
|
.dropdown-item:hover {
|
||||||
background: var(--el-menu-item-bg-color-active);
|
background: var(--el-menu-item-bg-color-active);
|
||||||
}
|
}
|
||||||
|
.ellipsis-text {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Add table
Reference in a new issue