快捷導(dǎo)航

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

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

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

需求：

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

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

需要注意的點(diǎn)：

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

解決“多個(gè)組件都需要觸發(fā)”的方案只能是通過一個(gè)地方觸發(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è)置后，頁面打開時(shí)便會(huì)動(dòng)態(tài)計(jì)算myWidth的值（拼接了'px'后便是字符串屬性了）

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

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

需要注意的點(diǎn)：

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

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

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

您可能感興趣的文章: