vue窗口变化onresize详解
更新时间：2024年08月10日 17:12:13 作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
实例详解Vue项目使用eslint + prettier规范代码风格
这篇文章主要介绍了Vue项目使用eslint + prettier规范代码风格,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了Vue实现无缝轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了vue 中this.$set 动态绑定数据的案例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
这篇文章主要介绍了vue3.x ref()语法糖赋值方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue实现换肤功能，一套深色，一套浅色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
uniapp开发小程序的过程中主、分包有大小限制,随着业务的增加,使用web-view加载H5的方式,往往纯加载并不能满足业务需求,这个时候就得了解小程序与H5的交互,这篇文章主要给大家介绍了关于微信小程序与webviewH5通信的踩坑记录,需要的朋友可以参考下2024-07-07
这篇文章主要为大家介绍了vue前端中Hbulider中Eslint实时校验自动修复设置操作过程，有需要的朋友可以借鉴参考下希望能够有所帮助2021-10-10
解决vue2+vue-router动态路由添加及路由刷新后消失问题
这篇文章主要介绍了解决vue2+vue-router动态路由添加及路由刷新后消失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue中调用HTTP请求的详细步骤,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定帮助,需要的朋友可以参考下2024-07-07
最新评论