JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-06-01 13:19:18 +08:00
Code Issues Projects Releases Wiki Activity

fix(editor): 修复pagebar文字超长换行问题

Browse Source
This commit is contained in:
roymondchen 2022-03-31 15:32:25 +08:00 committed by khuntoriia
parent 759b26481d
commit 5350c9050c
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/src/layouts/workspace/PageBar.vue
View File

@ -11,9 +11,13 @@
:class="{ active: page?.id === item.id }" :class="{ active: page?.id === item.id }"
@click="switchPage(item)" @click="switchPage(item)"
> >
<div class="m-editor-page-bar-title">
<slot name="page-bar-title" :page="item"> <slot name="page-bar-title" :page="item">
<el-tooltip effect="dark" placement="top-start" :content="item.name">
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</el-tooltip>
</slot> </slot>
</div>
<el-popover placement="top" :width="160" trigger="hover"> <el-popover placement="top" :width="160" trigger="hover">
<div> <div>

8
packages/editor/src/theme/page-bar.scss
View File

@ -10,6 +10,7 @@
color: $--font-color; color: $--font-color;
border-top: 1px solid $--border-color; border-top: 1px solid $--border-color;
z-index: 2; z-index: 2;
overflow: hidden;
.m-editor-page-bar-item { .m-editor-page-bar-item {
padding: 0 10px; padding: 0 10px;
@ -27,5 +28,12 @@
cursor: pointer; cursor: pointer;
} }
} }
.m-editor-page-bar-title {
max-width: 150px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
} }
} }