public/ruoyi-plus-vben5
1
0
Fork 0
mirror of https://gitee.com/dapppp/ruoyi-plus-vben5.git synced 2026-03-31 12:23:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fix layout change, ensure div[ref="asideRef"] is contained within <aside> (#7551)

Browse Source
This commit is contained in:
zouawen
2026-02-12 22:22:34 +08:00
committed by GitHub
parent aa74a2535b
commit 8e7a5d1ec3
1 changed files with 61 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
packages/@core/ui-kit/layout-ui/src/components/layout-sidebar.vue
View File

@@ -264,66 +264,71 @@ function handleMouseleave() {
class="h-full transition-all duration-150" class="h-full transition-all duration-150"
></div> ></div>
<aside <aside
:class="[
theme,
{
'bg-sidebar-deep': isSidebarMixed,
'border-r border-border bg-sidebar': !isSidebarMixed,
},
]"
:style="style" :style="style"
class="fixed left-0 top-0 h-full transition-all duration-150" class="fixed left-0 top-0 h-full transition-all duration-150"
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave"
> >
<SidebarFixedButton <div
v-if="!collapse && !isSidebarMixed && showFixedButton" class="h-full"
v-model:expand-on-hover="expandOnHover" :class="[
/> theme,
<div v-if="slots.logo" :style="headerStyle"> {
<slot name="logo"></slot> 'bg-sidebar-deep': isSidebarMixed,
</div> 'border-r border-border bg-sidebar': !isSidebarMixed,
<VbenScrollbar :style="contentStyle" shadow shadow-border> },
<slot></slot> ]"
</VbenScrollbar> :style="{ width: `${width}px` }"
<div :style="collapseStyle"></div>
<SidebarCollapseButton
v-if="showCollapseButton && !isSidebarMixed"
v-model:collapsed="collapse"
/>
</aside>
<div
v-if="isSidebarMixed"
ref="asideRef"
:class="[
themeSub,
{
'border-l': extraVisible,
},
]"
:style="extraStyle"
class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
>
<SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover"
v-model:collapsed="extraCollapse"
/>
<SidebarFixedButton
v-if="!extraCollapse"
v-model:expand-on-hover="expandOnHover"
/>
<div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
<slot name="extra-title"></slot>
</div>
<VbenScrollbar
:style="extraContentStyle"
class="border-border py-2"
shadow
shadow-border
> >
<slot name="extra"></slot> <SidebarFixedButton
</VbenScrollbar> v-if="!collapse && !isSidebarMixed && showFixedButton"
</div> v-model:expand-on-hover="expandOnHover"
/>
<div v-if="slots.logo" :style="headerStyle">
<slot name="logo"></slot>
</div>
<VbenScrollbar :style="contentStyle" shadow shadow-border>
<slot></slot>
</VbenScrollbar>
<div :style="collapseStyle"></div>
<SidebarCollapseButton
v-if="showCollapseButton && !isSidebarMixed"
v-model:collapsed="collapse"
/>
</div>
<div
v-if="isSidebarMixed"
ref="asideRef"
:class="[
themeSub,
{
'border-l': extraVisible,
},
]"
:style="extraStyle"
class="fixed top-0 h-full overflow-hidden border-r border-border bg-sidebar transition-all duration-200"
>
<SidebarCollapseButton
v-if="isSidebarMixed && expandOnHover"
v-model:collapsed="extraCollapse"
/>
<SidebarFixedButton
v-if="!extraCollapse"
v-model:expand-on-hover="expandOnHover"
/>
<div v-if="!extraCollapse" :style="extraTitleStyle" class="pl-2">
<slot name="extra-title"></slot>
</div>
<VbenScrollbar
:style="extraContentStyle"
class="border-border py-2"
shadow
shadow-border
>
<slot name="extra"></slot>
</VbenScrollbar>
</div>
</aside>
</template> </template>