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無效問題
vue中使用window.onresize時(shí)無效，由于使用多次 導(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)文章
vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法
這篇文章主要給大家介紹了關(guān)于vue2項(xiàng)目中封裝echarts地圖的優(yōu)雅方法,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vuex頁面刷新后數(shù)據(jù)丟失的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要介紹了vue中子組件調(diào)用兄弟組件方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
今天小編就為大家分享一篇Vue axios設(shè)置訪問基礎(chǔ)路徑方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
手把手教你使用electron將vue項(xiàng)目打包成exe
Electron相當(dāng)于一個(gè)瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項(xiàng)目打包成exe的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue組件中的數(shù)據(jù)傳遞方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
Vue3 axios配置以及cookie的使用方法實(shí)例演示
這篇文章主要介紹了Vue3 axios配置以及cookie的使用方法,需要的朋友可以參考下2023-02-02
vuejs是當(dāng)下很火的一個(gè)JavaScript MVVM庫，它是以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建的。今天給大家分享一篇教程關(guān)于Vue.js 60分鐘快速入門教程，一起看看吧2017-03-03
Vue?+?element-ui?背景圖片設(shè)置方式
這篇文章主要介紹了Vue?+?element-ui?背景圖片設(shè)置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
使用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果
vue-infinite-scroll插件可以無限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。這篇文章主要介紹了用vue-infinite-scroll實(shí)現(xiàn)無限滾動(dòng)效果,需要的朋友可以參考下2018-06-06