vue侧边栏根据窗体大小缩放

需求就是，如果用户窗体大小小于900多的时候，为了更好的展示页面内容，直接把侧边栏折叠了

collapse: 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）

 <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      :collapse: asideCollapse
       :default-active="activeMenu"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
<el-menu>

data中绑定，默认侧边栏展开

asideCollapse:true

定义窗口改变菜单栏折叠代码,如果窗口宽度小于992，则折叠，如果大于就展开

 created () {
    this.windowResizeHandle();
  },

// 窗口改变菜单折叠
    windowResizeHandle () {
       this.asideCollapse = document.documentElement['clientWidth'] <= 992 || false
      window.addEventListener('resize', debounce(() => {
        this.asideCollapse = document.documentElement['clientWidth'] <= 992 || false
      }, 150))
    },

文章到此结束，希望对你有所帮助，再见~