欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

vue实现移动端弹出键盘功能(防止页面fixed布局错乱)

时间:2022-06-25 08:07:27|栏目:vue|点击:

监听页面高度,当键盘弹出时,将按钮隐藏。

data() {
  return {
    docmHeight: document.documentElement.clientHeight ||document.body.clientHeight,
    showHeight: document.documentElement.clientHeight ||document.body.clientHeight,
    hideshow:true //显示或者隐藏footer
  }
 },
watch: {
    //监听显示高度
   showHeight:function() {
     if(this.docmHeight > this.showHeight){
      //隐藏
       this.hideshow=false
     }else{
      //显示
       this.hideshow=true
     }
   }
 },
mounted() {
   //监听事件
   window.onresize = ()=>{
     return(()=>{
       this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
   })()
   }
  
 },
<div class="bottom" v-show="hideshow">
  <div class="btn">
   <button>确认</button>
   <button>取消</button>
  </div>
 </div>

上一篇:Vue3+Vite+TS实现二次封装element-plus业务组件sfasga

栏    目:vue

下一篇:vue移动端如何解决click事件延迟,封装tap等事件

本文标题:vue实现移动端弹出键盘功能(防止页面fixed布局错乱)

本文地址:http://www.codeinn.net/misctech/205912.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有