pc端侧边菜单封装组件（使用element-ui组件库中el-menu组件）

最新推荐文章于 2023-08-03 12:37:34 发布

余一痴

最新推荐文章于 2023-08-03 12:37:34 发布

阅读量547

点赞数

分类专栏： vue项目文章标签： css vue.js html5 es6 javascript

本文链接：https://blog.csdn.net/yycnf/article/details/118302470

版权

本文介绍了如何使用Element UI的el-menu组件封装一个PC端侧边菜单。在封装过程中，遇到了点击图标导致文字隐藏的问题，通过引入vue-fragment插件并修改子组件标签为fragment解决了这一问题。

摘要由CSDN通过智能技术生成

pc端侧边菜单封装组件

使用布局容器组件布局

<el-container>
	<!--头部组件-->
  <el-header>Header</el-header>
  <el-container>
  	<!-- 侧边菜单组件 -->
    <el-aside :width="isShowMenu ? '64px !important' : '15% !important'">
    	
		 <div class="aside_menu_box">
		 <!--   图标点击折叠/展开菜单 -->
          <div class="menu_icon_container" ref="menu_icon">
            <div class="menu_icon" ref="menu_icon" @click="clickIcon">
              <i class="el-icon-menu"></i>
            </div>
          </div>
          	<!-- 菜单 -->
           <el-menu
            router
            :default-active="this.$route.fullPath"
            class="el-menu-vertical-demo"
            :collapse="isShowMenu"
            collapse-transition