诺依框架,vue-element-admin,滑动固定根据左侧菜单栏展开闭合自动调整固定位置,监控左侧菜单栏展开与闭合

诺依框架,vue-element-admin,滑动固定根据左侧菜单栏展开闭合自动调整固定位置,监控左侧菜单栏展开与闭合

  • 问题
    • 监控左侧菜单栏的展开与闭合及添加相关响应式的代码

问题

需求场景,需要在诺依框架中,滚动固定内容页面顶部的按钮,方便用户在较长的页面进行保存,关闭操作时不用再滚动顶部。
在这里插入图片描述
这里我们直接使用css 进行固定即可,但是诺依框架,vue-element-admin 左侧菜单栏是可以展开闭合,在就会导致 闭合后 固定区域 左边会空出一大部分,显然这种情况UI和项目经理是不能认可的,所以我们纪要让它滑动固定,又要让它跟着 左侧菜单栏是展开闭合而调整位置
诺依框架,vue-element-admin,滑动固定根据左侧菜单栏展开闭合自动调整固定位置,监控左侧菜单栏展开与闭合_第1张图片

监控左侧菜单栏的展开与闭合及添加相关响应式的代码

首先我们要能监控到左侧菜单栏的展开与闭合,而原生js并没有提供好的方法,这里我使用的是 element-resize-detector:

  1. 引入element-resize-detector ,var elementResizeDetectorMaker = require(“element-resize-detector”)。
  2. 使用 elementResizeDetectorMaker 监控左侧菜单栏 盒子的宽度变化,这里需要在组件 mounted 之后 进行监控,并处理相关响应式的代码。
    诺依框架,vue-element-admin,滑动固定根据左侧菜单栏展开闭合自动调整固定位置,监控左侧菜单栏展开与闭合_第2张图片
    创作不易,如能对您有所帮助,感谢您的支持,欢迎打赏,充电
    在这里插入图片描述在这里插入图片描述

你可能感兴趣的:(诺依框架,vue.js,javascript,elementui)