JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-09-20 13:39:58 +08:00
Code Issues Projects Releases Wiki Activity

style(editor): 页面列表长度超过可视窗口时出现滚动条

Browse Source
This commit is contained in:
roymondchen 2025-09-12 15:32:03 +08:00
parent e400175ffe
commit f5cb19dfa4
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/editor/src/layouts/page-bar/PageList.vue
View File

@ -11,19 +11,21 @@
:width="160" :width="160"
:destroy-on-close="true" :destroy-on-close="true"
> >
<div> <div class="page-bar-popover-wrapper">
<slot name="page-list-popover" :list="list"> <div class="page-bar-popover-inner">
<ToolButton <slot name="page-list-popover" :list="list">
v-for="(item, index) in list" <ToolButton
:data="{ v-for="(item, index) in list"
type: 'button', :data="{
text: item.devconfig?.tabName || item.name || item.id, type: 'button',
className: item.id === page?.id ? 'active' : '', text: item.devconfig?.tabName || item.name || item.id,
handler: () => switchPage(item.id), className: item.id === page?.id ? 'active' : '',
}" handler: () => switchPage(item.id),
:key="index" }"
></ToolButton> :key="index"
</slot> ></ToolButton>
</slot>
</div>
</div> </div>
<template #reference> <template #reference>
<TMagicIcon class="m-editor-page-list-menu-icon"> <TMagicIcon class="m-editor-page-list-menu-icon">

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

@ -92,6 +92,11 @@
padding: 4px 0; padding: 4px 0;
} }
.page-bar-popover-wrapper {
max-height: calc(100vh - $page-bar-height - 20px);
overflow: auto;
}
.menu-item { .menu-item {
cursor: pointer; cursor: pointer;
transition: all 0.2s ease 0s; transition: all 0.2s ease 0s;