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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » Vue如何动态获取浏览器的高度、宽度并实时修改DOM元素宽高度

发表评论