vue3 + element-plus实现侧边导航栏
当 NarBar.vue中绑定展开或收起的变量发生改变时候,右侧的内容不会随着左侧的内容变化而变化,而是会固定在初始位置不动。我们选择垂直导航菜单,后台管理系统彩带一般都可以被折叠,通过绑定一个变量来设定当前是否展开或关闭。侧边导航栏一般用在后台管理系统中,我们用element-plus更容易实现。所以我们需要在父组件中传入一个方法,在子组件触发,并且在。这个问题官网没有具体的解答,但是网上是有相
背景知识
侧边导航栏一般用在后台管理系统中,我们用element-plus更容易实现
基本布局
我们可以去 element-plus 官网找布局的容器组件,网址:Container 布局容器 | Element Plus
我们一般选择这个来布局侧边导航栏
Menu菜单
再去 element-plus 官网找菜单的组件,网址:Menu 菜单 | Element Plus
我们选择垂直导航菜单,后台管理系统彩带一般都可以被折叠,通过绑定一个变量来设定当前是否展开或关闭
具体代码
App.vue
<template>
<div class="common-layout">
<el-container>
<el-aside class="side" width="collapse">
<!-- 侧边栏 -->
<NarBar ref="narbar"/>
</el-aside>
<el-container>
<el-header height="125px">
<!-- 头部 -->
<el-card class="box-card" >
<HeaderContent ref="headerContent" @updateNarBar="updateNarBar"/>
</el-card>
</el-header>
<el-main>
<!-- 内容 -->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
import NarBar from './components/NarBar.vue';
import HeaderContent from './components/HeaderContent.vue';
import { ref } from 'vue';
const narbar = ref(null);
const updateNarBar = () => {
narbar.value.isCollapse = !narbar.value.isCollapse;
}
</script>
<style>
*{
padding: 0%;
margin: 0%;
}
</style>
引入的 NarBar.vue 源码:
<template>
<el-menu
default-active="2"
class="el-menu-vertical"
:collapse="isCollapse"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="1" class="titleName">
<el-icon><Management /></el-icon>
<template #title>图书借阅管理</template>
</el-menu-item>
<el-sub-menu index="2" class="menu">
<template #title>
<el-icon><Management /></el-icon>
<span>图书信息维护</span>
</template>
<el-menu-item index="1-1" class="menu" @click="$emit('addTab','LibrarySortEnter','图书分类录入')">图书分类录入</el-menu-item>
<el-menu-item index="1-2" class="menu" @click="$emit('addTab','StorePositionEnter','存放位置录入')">存放位置录入</el-menu-item>
<el-menu-item index="1-3" class="menu">图书录入</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3" class="menu">
<template #title>
<el-icon><Management /></el-icon>
<span>会员信息维护</span>
</template>
<el-menu-item index="2-1" class="menu">会员表</el-menu-item>
</el-sub-menu>
<el-sub-menu index="4" class="menu">
<template #title>
<el-icon><Management /></el-icon>
<span>图书信息维护</span>
</template>
<el-menu-item index="3-1" class="menu">图书借阅单</el-menu-item>
<el-menu-item index="3-2" class="menu">借阅明细</el-menu-item>
<el-menu-item index="3-3" class="menu">图书归还单</el-menu-item>
</el-sub-menu>
</el-menu>
</template>
<script setup>
import { ref,defineExpose } from 'vue'
import { Management } from '@element-plus/icons-vue'
const isCollapse = ref(false)
const handleOpen = (key, keyPath) => {
console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
console.log(key, keyPath);
}
defineExpose({
isCollapse,
})
</script>
<style scoped>
.el-menu-vertical,.el-menu-vertical:not(.el-menu--collapse){
height: 100vh;
}
.titleName{
font-size: 24px;
font-weight: 600;
}
.menu{
font-size: 14px;
}
</style>
引入的 HeaderContent.vue 源码
<template>
<div class="header_toolbars">
<el-icon class="closeMenu left" :size="16"
@click="$emit('updateNarBar')"><Fold /></el-icon>
<span class="welcome left" >欢迎进入图书借阅系统</span>
<!-- <el-icon class="setting right"
><setting/></el-icon> -->
</div>
</template>
<script setup>
import { Fold } from '@element-plus/icons-vue'
</script>
<style scoped>
.welcome{
display: inline-block;
color: rgb(166,153,153);
font-size: 18px;
}
.left{
text-align: left;
}
.right{
text-align: right;
}
.header_toolbars{
line-height: 64px;
height: 64px;
}
.toolbar_left{
text-align: left;
}
.toolbar_right{
text-align: right;
}
.setting:hover{
background-color: rgb(246,246,246);
cursor: pointer;
}
.tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.closeMenu{
cursor: pointer;
margin-right: 10px;
height: 64px;
width: 50px;
}
.closeMenu:hover
{
background-color: rgb(242,242,242);
}
</style>
核心解释
因为点击收起或展开的按钮在 HeaderContent.vue 中,而绑定收起或展开的变量在NarBar.vue中,所以我们需要在父组件中传入一个方法,在子组件触发,并且在 NarBar.vue 中必须将控制展开和收起的变量暴露出去,用vue3中的 defineExpose 方法,在通过 ref 绑定即可控制暴露的变量
tips:父组件为 App.vue
根据 element-plus 官网设计容易遇到的问题
<el-aside class="side" width="collapse">
</el-aside>
如果上面的代码把 width 属性设置成 "具体尺寸"px,比如 100 px,当 NarBar.vue中绑定展开或收起的变量发生改变时候,右侧的内容不会随着左侧的内容变化而变化,而是会固定在初始位置不动
如何解决?
很简单,不设置成 "具体尺寸"px 这种格式即可
这个问题官网没有具体的解答,但是网上是有相关的处理方式的
代码有问题或有疑问欢迎在评论区讨论
更多推荐
所有评论(0)