诺依框架,vue-element-admin,滑动固定根据左侧菜单栏展开闭合自动调整固定位置,监控左侧菜单栏展开与闭合
问题
需求场景,需要在诺依框架中,滚动固定内容页面顶部的按钮,方便用户在较长的页面进行保存,关闭操作时不用再滚动顶部。
这里我们直接使用css 进行固定即可,但是诺依框架,vue-element-admin 左侧菜单栏是可以展开闭合,在就会导致 闭合后 固定区域 左边会空出一大部分,显然这种情况UI和项目经理是不能认可的,所以我们纪要让它滑动固定,又要让它跟着 左侧菜单栏是展开闭合而调整位置
监控左侧菜单栏的展开与闭合及添加相关响应式的代码
首先我们要能监控到左侧菜单栏的展开与闭合,而原生js并没有提供好的方法,这里我使用的是 element-resize-detector:
- 引入element-resize-detector ,var elementResizeDetectorMaker = require(“element-resize-detector”)。
- 使用 elementResizeDetectorMaker 监控左侧菜单栏 盒子的宽度变化,这里需要在组件 mounted 之后 进行监控,并处理相关响应式的代码。