vue實(shí)現(xiàn)移動(dòng)端彈出鍵盤功能(防止頁(yè)面fixed布局錯(cuò)亂)

更新時(shí)間：2022年04月28日 15:38:17 作者：ssh__F

這篇文章主要介紹了vue?解決移動(dòng)端彈出鍵盤導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題,通過(guò)實(shí)例代碼給大家分享解決方案，對(duì)vue?移動(dòng)端彈出鍵盤相關(guān)知識(shí)感興趣的朋友一起看看吧

監(jiān)聽頁(yè)面高度，當(dāng)鍵盤彈出時(shí)，將按鈕隱藏。

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òng)端彈出鍵盤導(dǎo)致頁(yè)面fixed布局錯(cuò)亂的問(wèn)題(推薦)的文章就介紹到這了,更多相關(guān)vue 移動(dòng)端彈出鍵盤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作
這篇文章主要介紹了vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue實(shí)現(xiàn)tagsview多頁(yè)簽導(dǎo)航功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)tagsview多頁(yè)簽導(dǎo)航功能,本文梳理了一下vue-element-admin項(xiàng)目實(shí)現(xiàn)多頁(yè)簽功能的整體步驟，需要的朋友可以參考下
2022-08-08
詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽
這篇文章主要介紹了詳解vue-meta如何讓你更優(yōu)雅的管理頭部標(biāo)簽，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單數(shù)據(jù)的增刪改功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue 實(shí)現(xiàn)走馬燈效果
這篇文章主要介紹了vue 實(shí)現(xiàn)走馬燈效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼
本篇文章主要介紹了Vue2 使用 Echarts 創(chuàng)建圖表實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對(duì)象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue2項(xiàng)目中如何使用clipboard復(fù)制插件
這篇文章主要介紹了vue2項(xiàng)目中如何使用clipboard復(fù)制插件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
使用Vue3優(yōu)雅地實(shí)現(xiàn)表格拖動(dòng)排序
在?Vue.js?中主要通過(guò)第三方庫(kù)實(shí)現(xiàn)表格拖動(dòng)排序功能,其中最常用的庫(kù)是?SortableJS,下面我們就來(lái)看看如何使用SortableJS實(shí)現(xiàn)表格拖動(dòng)排序吧
2025-01-01
vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新
這篇文章主要為大家詳細(xì)介紹了vue-mugen-scroll組件實(shí)現(xiàn)pc端滾動(dòng)刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08