需求:窗口改变的时候,在组件中能监控到窗口的变化,从而改变控件的大小
比如你设置了一个背景图和浏览器窗口相同高度.
可以这么做.
data(){
return {
clientHeight: '600px',
},
},
mounted() {
// 动态设置背景图的高度为浏览器可视区域高度
// 首先在Virtual DOM渲染数据时,设置下背景图的高度.
this.clientHeight.height = `${document.documentElement.clientHeight}px`;
// 然后监听window的resize事件.在浏览器窗口变化时再设置下背景图高度.
const that = this;
window.onresize = function temp() {
that.clientHeight = `${document.documentElement.clientHeight}px`;
};
},
window.addEventListener('resize', handler)