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

请叫我欧皇i

已于 2023-05-11 15:34:51 修改

阅读量423

点赞数

分类专栏： vue2 Element 文章标签： vue.js javascript 前端

于 2023-04-03 17:04:35 首次发布

本文链接：https://blog.csdn.net/qq_44278289/article/details/129933889

版权

vue2 Element 专栏收录该内容

81 篇文章 32 订阅

订阅专栏

当用户窗口大小小于900px时，为了优化页面显示，文章介绍了如何使用Vue.js和ElementUI库来实现侧边栏的自动折叠功能。关键在于监听窗口resize事件，并使用debounce函数防止频繁触发，根据窗口clientWidth调整asideCollapse状态。

摘要由CSDN通过智能技术生成

需求就是，如果用户窗体大小小于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))
    },

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