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