Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法
更新時間：2018年11月06日 16:32:13 作者：MoonMoonLee
這篇文章主要介紹了Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
下面給大家分享兩種方法來介紹Vue 實時監(jiān)聽窗口變化 windowresize，具體內(nèi)容如下所示：
方法一：
First-step : 定義變量
data(){
return{
formLabelWidth : '123px'
}
},
Second-step: 根據(jù)生命周期 在mounted 中綁定 窗口變化
mounted(){
const that = this
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth
that.screenWidth = window.screenWidth
})()
}
},
Third-step: 綁定監(jiān)聽 watch
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)
}
}
},
方法二：在vue.2x里面時候，mounted 里面可以直接掛載 window.onresize事件。全局監(jiān)聽
mounted(){
window.onresize = () => {
return (() => {
this.handleLableWidth();
})()
}
this.handleLableWidth();
},
完全可以做到檢測窗口變化
總結(jié)
以上所述是小編給大家介紹的Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本文主要介紹了vue3 ref 和reactive的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要為大家詳細介紹了vue移動端實現(xiàn)手指滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了Vue.use源碼學(xué)習(xí)小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
詳解基于webpack和vue.js搭建開發(fā)環(huán)境
本篇文章主要介紹了詳解基于webpack和vue.js搭建開發(fā)環(huán)境 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本篇文章主要介紹了Vuex之理解Store的用法，Store類就是存儲數(shù)據(jù)和管理數(shù)據(jù)方法的倉庫，實現(xiàn)方式是將數(shù)據(jù)和方法已對象形式傳入其實例中2017-04-04
這篇文章主要為大家介紹了Vue2?this直接獲取data和methods原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了詳解Nuxt.js部署及踩過的坑，Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式：服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說說服務(wù)端渲染應(yīng)用部署，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在這篇文章中,我們將學(xué)習(xí)一下 Vue3 的全局組件注冊是如何實現(xiàn)的,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12