需求：

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

2. 頁(yè)面打開(kāi)后，調(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ā)”的方案只能是通過(guò)一個(gè)地方觸發(fā)后通過(guò)組件間通信進(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 {  // 其余的忽略不寫(xiě)了  data () {   return {    myWidth: (window.innerWidth - 500) + 'px'   }  } }</script>

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

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

因?yàn)檫@個(gè)值是載入頁(yè)面的時(shí)候就綁定了，是固定的值。那么在使用過(guò)程中，如果用戶(hù)操作調(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 {  // 其余的忽略不寫(xiě)了  data () {   return {    myWidth: (window.innerWidth - 500) + 'px'   }  },  mounted () {   // 注：window.onresize只能在項(xiàng)目?jī)?nèi)觸發(fā)1次   window.onresize = function windowResize () {    // 通過(guò)捕獲系統(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ā)”的方案只能是通過(guò)一個(gè)地方觸發(fā)后通過(guò)組件間通信進(jìn)行觸發(fā)。

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