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

更新時間：2018年09月15日 15:04:55 作者：郭緒涵

今天小編就為大家分享一篇Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

需求：

1. 頁面部分元素的尺寸需要根據(jù)實際打開時瀏覽器尺寸進(jìn)行設(shè)置；

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

需要注意的點：

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

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

(以調(diào)節(jié)class為myDiv的div的寬度為例)

解決需求1的方案：

html

<template>
 <div class="example">
  <div class='myDiv' v-bind:style="{width: myWidth}"></div>
 </div>
</template>

script

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

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

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

因為這個值是載入頁面的時候就綁定了，是固定的值。那么在使用過程中，如果用戶操作調(diào)節(jié)了瀏覽器窗口的大小，那么應(yīng)該需要觸發(fā)事件改變這個值才能使組件具有動態(tài)調(diào)節(jié)的效果，這個就是需求2了：

解決需求2的方案：

html

<template>
 <div class="example">
  <div class='myDiv' v-bind:style="{width: myWidth}"></div>
 </div>
</template>

script

<script>
 export default {
  // 其余的忽略不寫了
  data () {
   return {
    myWidth: (window.innerWidth - 500) + 'px'
   }
  },
  mounted () {
   // 注：window.onresize只能在項目內(nèi)觸發(fā)1次
   window.onresize = function windowResize () {
    // 通過捕獲系統(tǒng)的onresize事件觸發(fā)我們需要執(zhí)行的事件
    this.myWidth = (window.innerWidth - 500) + 'px';
   }
  }
 }
</script>

需要注意的點：

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

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

以上這篇Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: