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