码云笔记前端博客
Home > 前端技术 > Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

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

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

本文共计684个字,预计阅读时长需要2分钟。

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(6) 打赏

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

支付宝
微信
6

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

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

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

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 456 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 15 个
  • 标签总数: 1009 个
  • 建站时间: 494 天
  • 访问总量: 8652510 次
  • 最近更新: 2019年10月21日