vue實(shí)現(xiàn)移動端彈出鍵盤功能(防止頁面fixed布局錯亂)
更新時間：2022年04月28日 15:38:17 作者：ssh__F
這篇文章主要介紹了vue?解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題,通過實(shí)例代碼給大家分享解決方案，對vue?移動端彈出鍵盤相關(guān)知識感興趣的朋友一起看看吧
監(jiān)聽頁面高度，當(dāng)鍵盤彈出時，將按鈕隱藏。
data() {
return {
docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
hideshow:true //顯示或者隱藏footer
}
},
watch: {
//監(jiān)聽顯示高度
showHeight:function() {
if(this.docmHeight > this.showHeight){
//隱藏
this.hideshow=false
}else{
//顯示
this.hideshow=true
}
}
},
mounted() {
//監(jiān)聽事件
window.onresize = ()=>{
return(()=>{
this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
})()
}
},
<div class="bottom" v-show="hideshow">
<div class="btn">
<button>確認(rèn)</button>
<button>取消</button>
</div>
</div>到此這篇關(guān)于vue 解決移動端彈出鍵盤導(dǎo)致頁面fixed布局錯亂的問題(推薦)的文章就介紹到這了,更多相關(guān)vue 移動端彈出鍵盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問題
這篇文章主要介紹了Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
使用Vue?Query實(shí)現(xiàn)高級數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學(xué)習(xí)一下如何利用Vue?Query實(shí)現(xiàn)高級數(shù)據(jù)獲取吧2023-08-08
在 setup 語法糖中通過 import 引入的內(nèi)容，也可以直接在 template 標(biāo)簽中使用，這篇文章主要介紹了Vue?使用?setup?語法糖,需要的朋友可以參考下2023-10-10
vue?批量自動引入并注冊組件或路由實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue?批量自動引入并注冊組件或路由實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題
這篇文章主要介紹了Vue router傳遞參數(shù)并解決刷新頁面參數(shù)丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue的nextTick的使用,本文從源碼出發(fā)給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
Vue的watch和computed方法的使用及區(qū)別介紹
Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據(jù)的變化。這篇文章主要介紹了Vue的watch和computed方法的使用及區(qū)別,需要的朋友可以參考下2018-09-09
Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價格代碼實(shí)例
這篇文章主要介紹了Vue實(shí)現(xiàn)購物車的全選、單選、顯示商品價格實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在vue2項目中，組件間相互傳值或者后臺獲取的數(shù)據(jù)需要供多個組件使用的情況很多的情況下（后臺獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù)），那么就需要用vuex來管理這些。2017-05-05