VueJs監(jiān)聽window.resize方法示例
更新時間：2018年01月17日 09:43:01 作者：ailongyang
本篇文章主要介紹了VueJs監(jiān)聽window.resize方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
Vuejs 本身就是一個 MVVM 的框架。
但是在監(jiān)聽 window 上的 事件 時，往往會顯得 力不從心。
比如 這次是 window.resize
恩，我做之前也是百度了一下?？吹酱蠹一锒紴檫@個問題而發(fā)愁。
問題： 今天我也 遇到了這樣一個問題， 是關(guān)于canvas 自適應(yīng)。 根據(jù)窗口的變化去變化 canvas 的寬度
備注： 重要的問題說三遍 解決 框架內(nèi)的bug 先說 框架 版本 版本 版本 （這里用的 Vue 2.x 、ES6）
解決方案：
第一步： 先在 data 中去 定義 一個記錄寬度是 屬性
data: {
screenWidth: document.body.clientWidth // 這里是給到了一個默認值 （這個很重要）
}
第二步： 我們需要 講 reisze 事件在 vue mounted 的時候 去掛載一下它的方法
mounted () {
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
}
第三步： watch 去監(jiān)聽這個 屬性值的變化，如果發(fā)生變化則講這個val 傳遞給 this.screenWidth
watch: {
screenWidth (val) {
this.screenWidth = val
}
}
第四步：優(yōu)化 因為 頻繁 觸發(fā) resize 函數(shù)，導(dǎo)致頁面很卡的 問題
watch: {
screenWidth (val) {
if (!this.timer) {
this.screenWidth = val
this.timer = true
let that = this
setTimeout(function () {
// that.screenWidth = that.$store.state.canvasWidth
console.log(that.screenWidth)
that.init()
that.timer = false
}, 400)
}
}
}
最后一步： 去看看你想要的結(jié)果吧~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue中出現(xiàn)首屏白屏的六種解決方法,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-02-02
這篇文章主要介紹了vue-router路由懶加載和權(quán)限控制的相關(guān)資料2017-12-12
Vant是有贊前端團隊開源的移動端組件庫,于2017年開源,已持續(xù)維護4年時間,下面這篇文章主要給大家介紹了關(guān)于Vue3中使用vant的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-10-10
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對象的相關(guān)知識 ,需要的朋友可以參考下2018-11-11
vue 獲取攝像頭拍照并旋轉(zhuǎn)、裁剪生成新的圖片功能實現(xiàn)
本文給大家介紹vue 獲取攝像頭拍照并旋轉(zhuǎn)、裁剪生成新的圖片功能實現(xiàn),主要步驟包括初始化、獲取攝像頭權(quán)限、切換攝像頭、拍照以及對圖片進行旋轉(zhuǎn)和裁剪,同時提到了使用opencv.js和cropperjs進行自動裁剪和手動裁剪的實現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-12-12
這篇文章主要介紹了vue實現(xiàn)各種文件文檔下載及導(dǎo)出示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
vue實現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁
這篇文章主要介紹了vue實現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇對vue 鍵盤回車事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了MVVM 框架解析之雙向綁定,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
遞歸?簡單來講就是程序自己調(diào)用自身,vue中的遞歸組件就是,組件自身調(diào)用自身,下面這篇文章主要給大家介紹了關(guān)于Vue3遞歸組件的用法,需要的朋友可以參考下2022-03-03