Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度
vue 如何动态获取浏览器的高度和宽度,对于某些小伙伴来说间直接是简单到不能再简单了,为什么要整理这篇文章呢,源于最近项目中有高度、宽度自适应需求,需要适应不同分辨率的高度及宽度,在不同分辨率下效果区别不会很大,而我正好带着一位实习生小伙伴,所以把这需求给他让他练练手,结果可想而知了,所以整理这篇文章也是为了给后面的小伙伴提供参考而已,好了废话不多说,直接上源码。
HTML 代码:
<div id="app" v-cloak> <div class="content" :style="contentStyleObj"></div> </div>
javascript 代码:
export default { name: 'App', data () { return { contentStyleObj:{ height:'', width:'' }, } }, components:{ }, methods:{ getHeight(){ // 获取浏览器高度,减去顶部导航栏的值,70 该值也可以动态获取 this.contentStyleObj.height=window.innerHeight-70+'px'; this.contentStyleObj.width=window.innerWidth-250+'px'; } }, created(){ window.addEventListener('resize', this.getHeight); this.getHeight() console.log(this.contentStyleObj); }, destroyed(){ window.removeEventListener('resize', this.getHeight) } }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度
码云笔记 » Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度