wc24
417318921c
default-active 原绑 $route.fullPath(含 query),地址栏带 ?filter=… 时与菜单项
index('/'+name,纯路径)对不上 → 菜单不高亮/不跟随切换。改用 $route.path。
layout(桌面) + sideM(移动) 两处同改。
84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
<template>
|
|
<div class="mobile-nav-button" @click="showMobileNav">
|
|
<el-icon><el-icon-menu /></el-icon>
|
|
</div>
|
|
|
|
<el-drawer
|
|
:size="240"
|
|
v-model="nav"
|
|
direction="ltr"
|
|
:with-header="false"
|
|
destroy-on-close
|
|
>
|
|
<el-container class="mobile-nav">
|
|
<el-header>
|
|
<logo/>
|
|
</el-header>
|
|
<el-main>
|
|
<el-scrollbar>
|
|
<el-menu
|
|
:default-active="$route.path"
|
|
@select="select"
|
|
router
|
|
background-color="#212d3d"
|
|
text-color="#fff"
|
|
active-text-color="#409EFF"
|
|
>
|
|
<navMenu :navMenus="vueAdmin.menuTree"></navMenu>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
</el-main>
|
|
</el-container>
|
|
</el-drawer>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from "vue";
|
|
import { vueAdmin } from '../VueAdmin';
|
|
import navMenu from "./navMenu.vue";
|
|
import Logo from "./logo.vue";
|
|
|
|
let nav = ref(false);
|
|
function showMobileNav() { nav.value = true; }
|
|
function select() {}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mobile-nav-button {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
z-index: 10;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #409eff;
|
|
box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.mobile-nav-button i {
|
|
color: #fff;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.mobile-nav {
|
|
background: #212d3d;
|
|
}
|
|
.mobile-nav .el-header {
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
.mobile-nav .el-main {
|
|
padding: 0;
|
|
}
|
|
.mobile-nav .logo-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
</style>
|