huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化细节

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 10:59:03 +08:00
parent d6940b51e1
commit b7545173c6
3 changed files with 88 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
layouts/admin/components/AdminSubsider.uvue
View File

@@ -21,39 +21,39 @@
@click="handleNodeClick(level1, 1)"
>
<text class="menu-text">{{ level1.title }}</text>
<text v-if="level1.type === 'group'" class="chevron">
{{ isOpen(level1.id, 1) ? '▼' : '▶' }}
</text>
<text v-if="level1.type === 'group'" class="chevron">▶</text>
</view>
<!-- 二级子菜单容器 -->
<view v-if="level1.type === 'group' && isOpen(level1.id, 1)" class="sub-menu-container">
<template v-for="level2 in level1.children" :key="level2.id">
<view
class="menu-row level-2"
:class="{ 'is-active': isActive(level2), 'is-open': isOpen(level2.id, 2) }"
@click="handleNodeClick(level2, 2, level1.id)"
>
<text class="menu-text">{{ level2.title }}</text>
<text v-if="level2.type === 'group'" class="chevron">
{{ isOpen(level2.id, 2) ? '▼' : '▶' }}
</text>
</view>
<transition name="expand">
<view v-if="level1.type === 'group' && isOpen(level1.id, 1)" class="sub-menu-container">
<template v-for="level2 in level1.children" :key="level2.id">
<view
class="menu-row level-2"
:class="{ 'is-active': isActive(level2), 'is-open': isOpen(level2.id, 2) }"
@click="handleNodeClick(level2, 2, level1.id)"
>
<text class="menu-text">{{ level2.title }}</text>
<text v-if="level2.type === 'group'" class="chevron">▶</text>
</view>
<!-- 三级子菜单容器 -->
<view v-if="level2.type === 'group' && isOpen(level2.id, 2)" class="sub-menu-container">
<template v-for="level3 in level2.children" :key="level3.id">
<view
class="menu-row level-3"
:class="{ 'is-active': isActive(level3) }"
@click="handleNodeClick(level3, 3, level2.id)"
>
<text class="menu-text">{{ level3.title }}</text>
<!-- 三级子菜单容器 -->
<transition name="expand">
<view v-if="level2.type === 'group' && isOpen(level2.id, 2)" class="sub-menu-container">
<template v-for="level3 in level2.children" :key="level3.id">
<view
class="menu-row level-3"
:class="{ 'is-active': isActive(level3) }"
@click="handleNodeClick(level3, 3, level2.id)"
>
<text class="menu-text">{{ level3.title }}</text>
</view>
</template>
</view>
</template>
</view>
</template>
</view>
</transition>
</template>
</view>
</transition>
</template>
</view>
</scroll-view>
@@ -255,9 +255,29 @@ onMounted(() => {
font-size: 10px;
color: #c0c4cc;
margin-left: 4px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 旋转动画 */
.is-open .chevron {
transform: rotate(90deg);
}
.sub-menu-container {
overflow: hidden;
}
/* 展开收起动画 */
.expand-enter-active,
.expand-leave-active {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 1000px; /* 足够大的预设值 */
}
.expand-enter-from,
.expand-leave-to {
max-height: 0;
opacity: 0;
transform: translateY(-10px);
}
</style>