Vue如何實現(xiàn)調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法

這篇文章主要介紹了Vue如何實現(xiàn)調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發(fā)者使用vue。

需求：

1. 頁面部分元素的尺寸需要根據實際打開時瀏覽器尺寸進行設置；

2. 頁面打開后，調節(jié)瀏覽器窗口大小時需要動態(tài)調節(jié)部分元素的尺寸；

需要注意的點：

window.onresize只能在項目中一處進行引用觸發(fā)，如果在多個地方進行引用觸發(fā)，會導致只有1個觸發(fā)事件生效。

解決“多個組件都需要觸發(fā)”的方案只能是通過一個地方觸發(fā)后通過組件間通信進行觸發(fā)。

(以調節(jié)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>

如上設置后，頁面打開時便會動態(tài)計算myWidth的值（拼接了'px'后便是字符串屬性了）

然后將這個值通過 v-bind:style=”{width: myWidth}” 賦值綁定到我們需要設置的div上了，需求1完成。

因為這個值是載入頁面的時候就綁定了，是固定的值。那么在使用過程中，如果用戶操作調節(jié)了瀏覽器窗口的大小，那么應該需要觸發(fā)事件改變這個值才能使組件具有動態(tài)調節(jié)的效果，這個就是需求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只能在項目內觸發(fā)1次
   window.onresize = function windowResize () {
    // 通過捕獲系統(tǒng)的onresize事件觸發(fā)我們需要執(zhí)行的事件
    this.myWidth = (window.innerWidth - 500) + 'px';
   }
  }
 }
</script>

需要注意的點：

window.onresize只能在項目中一處進行引用觸發(fā)，如果在多個地方進行引用觸發(fā)，會導致只有1個觸發(fā)事件生效。

解決“多個組件都需要觸發(fā)”的方案只能是通過一個地方觸發(fā)后通過組件間通信進行觸發(fā)。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue如何實現(xiàn)調節(jié)窗口大小時觸發(fā)事件動態(tài)調節(jié)更新組件尺寸的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!