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 元素宽高度

「点点赞赏,手留余香」

6

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

发表回复