vue窗口变化onresize详解
作者：xx_小熊
这篇文章主要介绍了vue窗口变化onresize,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue窗口变化onresize
div大小随着窗口变化而变化
- 效果：
来看代码
<template>
<div>
<div class="mask">
<div class="center" :style="{width:centerWidth*0.2+'px',height:centerHeight*0.5+'px'}">
<p>width:{{centerWidth}}</p>
<p>height:{{centerHeight}}</p>
</div>
</div>
</div>
</template><script>
export default {
data() {
return {
centerWidth: document.documentElement.clientWidth,
centerHeight: document.documentElement.clientHeight
};
},
mounted() {
window.onresize = () => {
this.centerWidth = document.documentElement.clientWidth;
this.centerHeight = document.documentElement.clientHeight;
};
}
};
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。