vue菜单栏自适应折叠功能示例

目录

• 一、在使用了el-menu的页面下，通过watch监听宽度变化。
• 1.在方法里面定义
• 2.在watch上里面引用
• 3.在data里定义变量
• 二、在el-menu中定义:collapse=“isCollapse”，isCollapse为false是展开，为true是折叠
• 三、将isCollapse的值用仓库的值来定义，折叠和展开使用mutations来改变值

思路：我这里使用的是el-menu导航菜单，监听页面宽度的改变，来改变导航菜单的折叠和展开。

上篇文章给大家介绍了Vue el-menu 左侧菜单导航功能的实现 今天继续介绍vue菜单栏示例。

一、在使用了el-menu的页面下，通过watch监听宽度变化。

1.在方法里面定义

代码如下（示例）：

mounted() {
        VAR _this = this;
    window.onresize = function () {
          // 定义窗口大小变更通知事件     _this.screenWidth = document.documentElement.clientWidth;
 //窗口宽度    }
    ;
  }
    ,  

2.在watch上里面引用

代码如下（示例）：

  watch: {
    screenWidth: function (val) {
      if (val  1400) {
        if (this.time) {
              clearInterval(this.time);
        }
            this.time = setTimeout(() =>
 {
              this.time = null;
              console.LOG("折叠");
        }
    , 100);
      }
 else {
        if (this.time) {
              clearInterval(this.time);
        }
            this.time = setTimeout(() =>
 {
              this.time = null;
              console.log("展开");
        }
    , 100);
      }
    }
,  }
    , 

3.在data里定义变量

代码如下（示例）：

  data() {
    return {
      screenWidth: document.documentElement.clientWidth, //屏幕宽度      time: null,    }
    ;
  }
    ,

二、在el-menu中定义:collapse=“isCollapse”，isCollapse为false是展开，为true是折叠

三、将isCollapse的值用仓库的值来定义，折叠和展开使用Mutations来改变值

总结

例如：到此就是今天要讲的内容，本文仅仅简单介绍了el-menu的使用，element提供了大量组件，但是要怎么使用需要我们自己去发掘。更多相关vue菜单栏自适应折叠内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• vue顶部菜单栏实现小结
• vue实现右键菜单栏
• 如何利用Vue3管理系统实现动态路由和动态侧边菜单栏
• Vue结合路由配置递归实现菜单栏功能
• 基于vue实现圆形菜单栏组件
• vue2.0使用v-for循环制作多级嵌套菜单栏
• Vue实现侧边菜单栏手风琴效果实例代码
• 基于vue.js实现侧边菜单栏

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！