需求:
做一个大屏展示,需要全屏显示以及宽度自适应,就是说高宽发生变化时,需要重新局部刷新渲染
场景:
1、
点击按钮
隐藏或显示侧边栏,此时大屏主体的高宽发生变化
2、按f11键时,会整个板块占满全屏,包括项目标题、侧边栏、大屏主体,但是想实现的是点击大屏,大屏单独占满全屏
试错:
之前用浏览器可视窗口来做这个功能,发现以上两个场景都不太满足需求,以下是window.addEventListener的resize事件
// 监听窗口
this.$nextTick(() => {
window.addEventListener("resize", this.changView);
});
涉及以下函数及功能
1)changView函数
changView() {
// 监听浏览器窗口大小改变
// 浏览器变化执行动作
setTimeout(() => {
this.reloadFn();
}, 1000);
},
2)reloadFn函数
// 局部刷新页面
reloadFn() {
//isReload是一个布尔值,将其绑定在想作用的局部刷新的盒子上即可,用v-if="isReload"
this.isReload = false;
this.$nextTick(() => {
this.isReload = true;
});
},
3)记得注销浏览器窗口监听
beforeDestroy() {
// 事件注销
window.removeEventListener("resize", this.changView);
},
其实这些也可以实现对应的需求,如果没有以上两点要求的话
实际操作代码(满足以上需求的)
1)采用element-resize-detector
安装依赖:
npm i element-resize-detector
文档地址:
element-resize-detector npm 地址
2)全局引入
// main.js (组件中按需引入方式,见2.使用方法中代码)
import ElementResizeDetectorMaker from "element-resize-detector";
Vue.prototype.$erd = ElementResizeDetectorMaker();
3)在mounted钩子函数中
mounted() {
const elementResizeDetectorMaker = require("element-resize-detector");
this.$nextTick(()=>{
let erd = elementResizeDetectorMaker();
//bigbox1就是需要监听的盒子的id
erd.listenTo(document.getElementById("bigbox1"),
(ele) => {
//这是一个防抖函数,避免重复调用函数卡死
debounce(this.changView)
});
})
}
4)debounce是引入的一个js文件里面的防抖方法
//防抖
export const debounce = (() => {
let timer = null
return (callback, wait = 200) => {
timer&&clearTimeout(timer)
timer = setTimeout(callback, wait)
}
})()
// 节流
export const throttle = (() => {
let last = 0
return (callback, wait = 200) => {
let now = +new Date()
if (now - last > wait) {
callback()
last = now
}
}
})()
记得引入对应文件再使用
import {debounce} from './components/utils';
参考文章:Vue中 引入使用 element-resize-detector 监听 Dom 元素 宽度、高度 变化_明天也要努力的博客-CSDN博客vue使用element-resize-detector监听元素宽度变化_Agwenbi的博客-CSDN博客