vue窗口变化onresize

最新推荐文章于 2023-12-27 15:10:37 发布

原创最新推荐文章于 2023-12-27 15:10:37 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了一种使用Vue.js实现响应式布局的方法，通过监听窗口大小变化实时调整div元素的宽高，确保页面在不同设备上都能完美展示。

div大小随着窗口变化而变化
效果：
在这里插入图片描述

以下代码：

<template>
  <div>
    <div class="mask">
      <div class="center" :style="{width:centerWidth*0.2+'px',height:centerHeight*0.5+'px'}">
        <p>width:{{centerWidth}}</p>
        <p>height:{{centerHeight}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerWidth: document.documentElement.clientWidth,
      centerHeight: document.documentElement.clientHeight
    };
  },
  mounted() {
    window.onresize = () => {
      this.centerWidth = document.documentElement.clientWidth;
      this.centerHeight = document.documentElement.clientHeight;
    };
  }
};
</script>