vue平板弹出小键盘遮挡页面

记录一下写代码时遇到的问题

在一个table里，点击一个小格子，会弹出一个输入框。在移动端，点击输入框会弹出输入键盘，把输入框以及表格给挡住。

说下思路，首先我们需要用到ref来操纵dom元素。获取到点击的小格子的dom，获得其y坐标。如果这个y坐标大于某个值，那么就让表格向上滚动。此时，我们的输入键盘就不再挡住输入框了。

showKey() {
   this.dom1 = this.$refs[this.CheckedPover].$el.getBoundingClientRect();
   console.log("dom1", this.dom1.y);
   if (this.dom1.y > 380) {
     this.dom = this.$refs.table.bodyWrapper;
     this.dom.scrollTop = this.dom.scrollTop + 320;
    }
 },

我们需要给输入框设置一个id,这个this.CheckedPover里存放的即是我设置的id。还需要给table设置一个ref。

//给表格设置ref
 <el-table
    :data="tableData"
    ref="table"
    @cell-click="pasteAndSave"
    :height="tableHeight"
 >
 //给弹出的框框设置ref
 <el-popover
    placement="left"
    width="400"
    trigger="manual"
    :ref="scope.row.scheduleId + scope.column.property"
    v-if="ShowAddMemoArr[scope.row.indexId].monday"
 >
 //记得在某个方法中给它赋值
 this.CheckedPover =  scope.row.scheduleId + 
 scope.column.property

当我们点击输入框时，触发这个方法。就达到了防止遮挡的效果了。

在关闭对话框时，记得把滚动的高度再滚回来就可以了。

 //关闭popover对话框
    pClose() {
      this.dom = this.$refs.table.bodyWrapper;
      if (this.dom.scrollTop >= 320) {
        this.dom.scrollTop = this.dom.scrollTop - 320;
      }
    },

最后记得一点，输入框的布局要为相对布局，position:relative

我初步先写一写，如有问题，欢迎大家指正😄