web前端开发个人技术博客
当前位置: 前端技术 > Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

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

2019-08-07 分类:前端技术 作者:码云 阅读(195)

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

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(5) 打赏

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

支付宝
微信
5

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论