vue结合Element UI如何实现点击左侧菜单的折叠与展开

悠悠 2023-07-03 12:12 29阅读 0赞

#### 一、Element UI 中菜单的折叠与展开 ####

1.  在`Element UI`中的官方文档中，在`NavMenu` 导航菜单中，在`Menu Attribute` 中，有一个 `collapse` 属性。它的作用是是否水平折叠收起菜单（仅在 `mode` 为 `vertical` 时可用），是一个`Boolean`类型，默认值为`false`，我们可以根据这个 `collapse` 属性，通过设置它的`true`或者`false`的值控制菜单的折叠与展开。
2.  在导航菜单头部，可以设置一个按钮，通过点击控制左侧菜单的显示与隐藏，代码如下：

1.  在`data`中定义一个数据`isCollapse`，是一个变量，控制它的值实现切换，默认为`false`，代码如下：

isCollapse: false,

1.  在 `el-menu` 中，可以动态绑定 `collapse`的值，代码如下

:collapse="isCollapse"

1.  在`method`中，定义一个之前按钮绑定点击事件的方法，`toggleCollapse`，在这个方法当中，控制`isCollapse`的值，进行取反操作，这样就实现了菜单的折叠与展开，代码如下：

// 点击按钮，切换菜单的折叠与展开
        toggleCollapse () { 
          this.isCollapse = !this.isCollapse
        }

1.  菜单的折叠与展开`Element`中默认是有动画的，不方便显示，我们可以选择关闭，在`Menu Attribute`中，有一个`collapse-transition` 属性。它的作用是是否开启折叠动画，是一个 `boolean` 类型，默认值为`true`，我们把它设置为`false`，就可以关闭折叠动画了，代码如下：

:collapse-transition="false"

1.  在左侧菜单的展开与折叠中，会发现一个问题，文本和图标折叠了，但是菜单的长度并没有折叠，发现原因是菜单的长度给了一个固定的值，而实际上我们需要动态给定长度。如果菜单是展开的，长度是等于文本的长度+图标的长度。如果菜单是折叠的，长度是等于图标的长度。我们可以根据`isCollapse`的值进行判断，通过它的值为`true`或者是`false`，来给定不同的长度，代码如下：

<el-aside :width="isCollapse?'64px':'200px'">

#### 二、菜单的折叠与展开实现 ####

1.  **主目录菜单的完整代码**：

<template>
        <el-container class="home-container">
            
            <el-header>
                <el-button type="info" @click="logout">退出</el-button>
            </el-header>
            
            <el-container>
                
                <el-aside :width="isCollapse?'64px':'200px'">
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                    
                    <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="activePath">
                        
                        <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                            
                            <template slot="title">
                                
                                <i :class="iconsObj[item.id]"></i>
                                
                                <span>{
       { item.authName }}</span>
                            </template>
    
                            
                            <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)">
                                <template slot="title">
                                    
                                    <i class="el-icon-menu"></i>
                                    
                                    <span>{
       { subItem.authName }}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </template>
    
    <script> export default { data () { return { menuList: [], iconsObj: { '125': 'iconfont icon-yonghu1', '103': 'iconfont icon-quanxian', '101': 'iconfont icon-shangpin', '102': 'iconfont icon-dingdan2', '145': 'iconfont icon-icon_huabanfuben' }, isCollapse: false, // 被激活的链接地址 activePath: '' } }, created () { this.getMenuList() this.activePath = window.sessionStorage.getItem('activePath') }, methods: { // 退出功能 logout () { // 清空token window.sessionStorage.clear() this.$router.push('/login') }, // 获取所有的菜单 async getMenuList () { const { data: res } = await this.$http.get('menus') if (res.meta.status !== 200) return this.$message.error(res.meta.msg) this.menuList = res.data console.log(res) }, // 点击按钮，切换菜单的折叠与展开 toggleCollapse () { this.isCollapse = !this.isCollapse }, // 保存链接的激活状态 saveNavState (activePath) { window.sessionStorage.setItem('activePath', activePath) this.activePath = activePath } } } </script>
    
    <style lang="less" scoped> .home-container { height: 100%; } .el-header { background-color: #373d41; display: flex; justify-content: space-between; padding-left: 0; align-items: center; color: #fff; font-size: 20px; > div { display: flex; align-items: center; span { margin-left: 15px; } } } .el-aside { background-color: #333744; .el-menu { border-right: none; } } .el-main { background-color: #eaedf1; } .iconfont { margin-right: 10px; } .toggle-button { background-color: #4a5064; font-size: 10px; line-height: 24px; color: #fff; text-align: center; letter-spacing: 0.2em; cursor: pointer; } </style>

1.  **菜单的展开与折叠的效果实现**：

*  **菜单的展开效果**：  
    ![在这里插入图片描述][20200206145453368.PNG]
 *  **菜单的折叠效果**：  
    ![在这里插入图片描述][20200206145500949.PNG]

[20200206145453368.PNG]: https://img-blog.csdnimg.cn/20200206145453368.PNG
[20200206145500949.PNG]: https://img-blog.csdnimg.cn/20200206145500949.PNG