Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

vue如何动态获取浏览器的高度和宽度,对于某些小伙伴来说间直接是简单到不能再简单了,为什么要整理这篇文章呢,源于最近项目中有高度、宽度自适应需求,需要适应不同分辨率的高度及宽度,在不同分辨率下效果区别不会很大,而我正好带着一位实习生小伙伴,所以把这需求给他让他练练手,结果可想而知了,所以整理这篇文章也是为了给后面的小伙伴提供参考而已,好了废话不多说,直接上源码。
HTML代码:

1
2
3
<div id="app" v-cloak>
   <div class="content" :style="contentStyleObj"></div>
</div>

javascript代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>

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)
  }
}

</script>

效果如下:
Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

未经允许不得转载:码云笔记 » Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度
喜欢(0) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏