脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue窗口变化onresize

vue窗口变化onresize详解

 更新时间：2024年08月10日 17:12:13   作者：xx_小熊  
这篇文章主要介绍了vue窗口变化onresize,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue窗口变化onresize

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>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论