elementplus实现左侧菜单栏收缩与展开

1.页面结构

Home.vue下包含aside.vue和menu.vue

2.TAside.vue el-menu左侧菜单栏显示

注意:

  1. 要使用收缩与展开,el-aside必须设置width="collapse",否则收缩展开会出现收缩后,el-aside宽度不变窄
  2. 需要使用动态改变展开收缩值 :collapse="isCollapse"
  3. @open="handleOpen"展开后改变isCollapse的值(@close="handleClose"不生效也不影响效果)
  4. :collapse-transition="false"关闭动画效果
  5. el-menu-item中的菜单项必须放在template中,且solt为title否则,展开收缩的会不包含菜单文字<template #title>{{menu.authName}}</template>
  6. 必须设置.el-menu-vertical-demo:not(.el-menu--collapse)样式
html 复制代码
  <el-aside width="collapse">
    <el-scrollbar>
      <div v-bind="menuContent">
        <el-menu
          :default-active="$route.path"
          :collapse="isCollapse"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          :collapse-transition="false"
          router
          active-text-color="#ffd04b"
          background-color="#545c64"
          text-color="#fff"
        >
          <!-- 根据后端返回rights数据渲染菜单 -->
          <el-menu-item :index="menu.path" v-for="menu in showMenuList" :key="menu.id">
            <el-icon v-if="menu.icon">
              <component :is="iconMapping[menu.icon]" />
            </el-icon>
            <template #title>{{menu.authName}}</template>
          </el-menu-item>
        </el-menu>
      </div>
    </el-scrollbar>
  </el-aside>

<script setup>
import { ref,  inject } from "vue";
// 设置菜单栏可折叠
const isCollapse = inject('isCollapse', ref(false))
const handleOpen = (key, keyPath) => {
  isCollapse.value = false;
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse){
  width: 200px;
  min-height: 400px;
}
</style>

3.TMain.vue中设置展开收缩按钮

html 复制代码
    <div class="tab-box">
      <!-- 折叠菜单 -->
      <div class="collapse-btn" @click="collapseNav">
        <el-icon>
          <Fold />
        </el-icon>
      </div>
      <!-- 选项卡 -->
      <el-tabs></el-tabs>
....
<script setup>
import { ref,inject } from "vue";
// 设置菜单栏可折叠
const isCollapse = inject('isCollapse', ref(false))
const collapseNav = () =>{
  isCollapse.value = !isCollapse.value;
}
</script>

<style>
.tab-box {
  display: flex;
}

.collapse-btn {
  font-size: 24px;
  margin-right: 10px;
  color: #545c64;
  padding-top: 6px;
}
</style>

4.TAside.vue和TMain.vue页面共享的isCollapse

isCollapse有两个页面的父级页面Home.vue通过provide注入响应式数据后 ,子页面inject获取,更改后也会具有响应性

javascript 复制代码
import { provide, ref} from 'vue'
// 组合式API引入后可以直接使用,不需要再到components中引入
import TAside from '@/components/TAside.vue'
import TMain from '@/components/TMain.vue'
// 注入左侧菜单栏显示与否值
const isCollapse = ref(false);
provide("isCollapse", isCollapse);

5.效果

相关推荐
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军10 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy11 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端11 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿11 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉11 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~11 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan201513 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
reembarkation14 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
给月亮点灯|14 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js