ruoyi菜单折叠,菜单收缩

  问题描述

VUE菜单有一个BUG,当我们点击其它按钮或者首页的时候,已经展示的一级菜单是不会自动收缩的。这个问题也导致很多开发者把一级菜单都换成了二级菜单。

错误展示

错误的效果请看下图。

 解决方法

1、寻找菜单文件

因为我使用的是ruoyi的前端框架,所以菜单文件的路径是src/layout/components/Sidebar/index.vue文件,如果大家使用的是其他的框架或者自己写的去全局搜索关键字【el-menu】就能找到菜单页面。文件路径如下图

2、添加以下代码

// el-menu菜单中添加ref和open事件

data() {
        return {
            // 记录用户上次点击的菜单索引
            keyIndex:0,
        };
    },
    watch: {
        $route () {
            // 监控用户点击的菜单,如果是首页或者个人详情页面都要把上次打开的页面收缩起来。
            if (this.$route.path === '/index' ||this.$route.path ===  "/user/profile") {
                this.$refs.menu.close(this.keyIndex);
            }
        }
    },
    methods: {
        handleOpen (key) {
            this.keyIndex = key;
        }
    },

 3、完整的代码




4、修改后的效果

5、到此功能完成


-----华丽的分割线,以下是凑字数,大家不用花时间看,快去改代码-----

-----华丽的分割线,以下是凑字数,大家不用花时间看,快去改代码-----

-----华丽的分割线,以下是凑字数,大家不用花时间看,快去改代码-----




你可能感兴趣的:(vue.js,element,menu,折叠,收缩,菜单,ruoyi)