Vue如何實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)電話聯(lián)系：13518219792，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù)，成都創(chuàng)新互聯(lián)網(wǎng)頁制作領(lǐng)域十多年，包括塑料袋等多個領(lǐng)域擁有豐富的網(wǎng)站設(shè)計經(jīng)驗，選擇成都創(chuàng)新互聯(lián)，為企業(yè)保駕護(hù)航。為什么要使用Vue

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

需求：

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

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

script

需要注意的點：

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

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

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

當(dāng)前題目：Vue如何實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法-創(chuàng)新互聯(lián)
地址分享：http://m.jiaotiyi.com/article/epcid.html