vue 監(jiān)聽屏幕高度的實例
更新時間：2018年09月05日 09:20:01 作者：bai_riqiang
今天小編就為大家分享一篇vue 監(jiān)聽屏幕高度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
項目用vue版本是2.0的，項目中用到es6
首先需要在data里面定義頁面的高度
data (){
return {
fullHeight: document.documentElement.clientHeight
}
}
把window.onresize事件掛在到mounted
mounted() {
const that = this
window.onresize = () => {
return (() => {
window.fullHeight = document.documentElement.clientHeight
that.fullHeight = window.fullHeight
})()
}
}
監(jiān)聽window.onresize事件
watch: {
fullHeight (val) {
if(!this.timer) {
this.fullHeight = val
this.timer = true
let that = this
setTimeout(function (){
that.timer = false
},400)
}
}
}
這里的定時器是為了優(yōu)化，如果頻繁調(diào)用window.onresize方法會造成頁面卡頓，增加定時器會避免頻繁調(diào)用window.onresize方法
以上這篇vue 監(jiān)聽屏幕高度的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue element實現(xiàn)表格增加刪除修改數(shù)據(jù)
這篇文章主要為大家詳細介紹了vue element實現(xiàn)表格增加刪除修改數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Vue3+TypeScript埋點方面的應(yīng)用實踐
本文詳細闡述了如何在Vue3中使用TypeScript實現(xiàn)埋點功能,包括全局注冊$track插件、Mixin實現(xiàn)全局埋點等,隨著Vue3的逐漸普及,在實際工作中采用Vue3+TypeScript實現(xiàn)埋點將會變得越來越流行2023-08-08
vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了vue3中標簽form插件的使用的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2024-01-01
這篇文章主要為大家介紹了Vue?router?路由守衛(wèi)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定示例分析
這篇文章主要為大家介紹了Vue響應(yīng)式原理及雙向數(shù)據(jù)綁定的示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
使用vue-element-admin框架從后端動態(tài)獲取菜單功能的實現(xiàn)
​ vue-element-admin是一個純前端的框架，左側(cè)菜單是根據(jù)路由生成的。實際開發(fā)中經(jīng)常需要根據(jù)當前登陸人員的信息從后端獲取菜單進行展示，本文將詳細介紹如何實現(xiàn)該功能2021-04-04
這篇文章主要介紹了vue中使用$http.post請求傳參的錯誤及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載
Vue項目開發(fā)中,遇到界面下載功能時,前端如何實現(xiàn)將后端返回二進制文件在瀏覽器自動下載呢,本文就來和大家聊聊具體的解決方法吧2024-11-11