Vue如何实现调节窗口大小时触发事件动态调节更新组件尺寸的方法

这篇文章主要介绍了Vue如何实现调节窗口大小时触发事件动态调节更新组件尺寸的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

需求：

1. 页面部分元素的尺寸需要根据实际打开时浏览器尺寸进行设置；

2. 页面打开后，调节浏览器窗口大小时需要动态调节部分元素的尺寸；

需要注意的点：

window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。

解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。

(以调节class为myDiv的div的宽度为例)

解决需求1的方案：

html

<template>
 <div class="example">
  <div class='myDiv' v-bind:></div>
 </div>
</template>

script

<script>
 export default {
  // 其余的忽略不写了
  data () {
   return {
    myWidth: (window.innerWidth - 500) + 'px'
   }
  }
 }
</script>

如上设置后，页面打开时便会动态计算myWidth的值（拼接了'px'后便是字符串属性了）

然后将这个值通过 v-bind:style=”{width: myWidth}” 赋值绑定到我们需要设置的div上了，需求1完成。

因为这个值是载入页面的时候就绑定了，是固定的值。那么在使用过程中，如果用户操作调节了浏览器窗口的大小，那么应该需要触发事件改变这个值才能使组件具有动态调节的效果，这个就是需求2了：

解决需求2的方案：

html

<template>
 <div class="example">
  <div class='myDiv' v-bind:></div>
 </div>
</template>

script

<script>
 export default {
  // 其余的忽略不写了
  data () {
   return {
    myWidth: (window.innerWidth - 500) + 'px'
   }
  },
  mounted () {
   // 注：window.onresize只能在项目内触发1次
   window.onresize = function windowResize () {
    // 通过捕获系统的onresize事件触发我们需要执行的事件
    this.myWidth = (window.innerWidth - 500) + 'px';
   }
  }
 }
</script>

需要注意的点：

window.onresize只能在项目中一处进行引用触发，如果在多个地方进行引用触发，会导致只有1个触发事件生效。

解决“多个组件都需要触发”的方案只能是通过一个地方触发后通过组件间通信进行触发。

感谢你能够认真阅读完这篇文章，希望小编分享的“Vue如何实现调节窗口大小时触发事件动态调节更新组件尺寸的方法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!