记录一下写代码时遇到的问题
在一个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
我初步先写一写,如有问题,欢迎大家指正😄