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

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

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

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

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

1.在方法里面定义

代码如下（示例）：

 mount ed() {  
   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的值用仓库的值来定义，折叠和展开使 用M utations来改变值

总结

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

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

总结

以上是 为你收集整理的 vue菜单栏自适应折叠功能示例 全部内容，希望文章能够帮你解决 vue菜单栏自适应折叠功能示例 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于vue菜单栏自适应折叠功能示例的详细内容...