vue監(jiān)聽屏幕尺寸變化問題,window.onresize很簡(jiǎn)單
更新時(shí)間：2023年10月21日 11:00:46 作者：nilmao
這篇文章主要介紹了vue監(jiān)聽屏幕尺寸變化問題,window.onresize很簡(jiǎn)單,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue監(jiān)聽屏幕尺寸變化
>> 可在任意組件中使用
1.在data中定義一個(gè)變量，用于記錄屏幕尺寸；
data(){
return{
screenWidth: null,
}
}且做好定義為 null
2.使用 window.onresize 方法獲取屏幕尺寸；
mounted() {
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
},需要在 mounted() 鉤子中
3.使用 watch 方法即可實(shí)時(shí)監(jiān)聽屏幕尺寸；
watch: {
screenWidth: {
handler: function (val) {
if (val < 900) {
console.log(val+'屏幕寬度小于900px')
} else {
console.log(val+'屏幕寬度大于900px')
}
},
immediate: true,
deep:true
},
}搞定！
window.onresize無(wú)效問題
vue中使用window.onresize時(shí)無(wú)效，由于使用多次 導(dǎo)致后面將之前的所覆蓋
解決
使用window.addEventListener() 即可，
代碼如下：
mounted:{
// 綁定resize
window.addEventListener('resize', ()=>{
// 書寫代碼內(nèi)容
})
},
destoryed:{
// 解綁resize
window.removeEventListener('resize', ()=>{
})
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
![vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案](http://img.jbzj.com/images/xgimg/bcimg0.png)
vue新手入門出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問題
這篇文章主要介紹了vue項(xiàng)目登錄成功后退出時(shí)清空sessionId和userId的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource
本篇文章主要介紹了詳解vue與后端數(shù)據(jù)交互(ajax)：vue-resource，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)
本文主要介紹了基于el-table封裝的可拖拽行列、選擇列組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
淺析vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享
這篇文章主要介紹了vue 函數(shù)配置項(xiàng)watch及函數(shù) $watch 源碼分享 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue使用mui遇到的坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+scss+element-ui實(shí)現(xiàn)表格表頭斜杠一分為三方式
這篇文章主要介紹了vue+scss+element-ui實(shí)現(xiàn)表格表頭斜杠一分為三方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08