项目是原生嵌套H5,固定横屏使用
内部元素设置固定,因为要做一定的自适应,所以内容中很多元素都设置宽高根据屏幕宽高来设置的,然后再其中使用输入框
<el-table
ref="table"
:data="tableList"
:show-summary="true"
:summary-method="getSummaries"
header-cell-class-name="table-header-cell"
class="charge-table"
cell-class-name="table-cell-class"
:row-class-name="tableRowClassName"
@row-click="rowClick"
border>
<el-table-column
label="类别"
width="290">
<template slot-scope="scope">
<div class="text-class" :style="{color: scope.row.text === '合计' ? '#D75858' : '#4D5170'}">{
{scope.row.text}}</div>
</template>
</el-table-column>
<el-table-column label="金额(元)">
<template slot-scope="scope">
<div class="flex-center-item">
<div v-if="scope.row.type === 'input'" @click="inputFocus = true">
<van-field
v-show="inputFocus"
v-model="form[scope.row.attr]"
type="number"
placeholder="请填写"
:ref="scope.row.ref"
class="charge-input"
:label="blank"
maxlength="6"
@input="countTotal"
@blur="limitNum"
/>
<span
v-if="!inputFocus"
class="copy-input"
:style="{
color: form[scope.row.attr] ? '#4d5170' : '#c8c9cc',
fontSize: form[scope.row.attr] ? '18px' : '16px'
}">{
{form[scope.row.attr] || '请填写'}}</span>
</div>
<van-checkbox
v-else-if="scope.row.type === 'radio'"
v-model="form[scope.row.attr]"
checked-color="#5C82EE"
icon-size="34px"
:name="scope.row.cost"
@change="(val) => checkboxChange(val, scope.row)"
></van-checkbox>
</div>
</template>
</el-table-column>
</el-table>
使用的UI框架是vant,结果发现放在原生壳里面,有个输入框输入竟然是倒着输入的
最开始以为是vant的原因,换了最基本的input标签还是不对,又以为是不是用了elementUI里面要用element的input标签,也不对
本地再浏览器上是不能重现这个问题的,然后我找了项目中另一个地方的input标签是正常的,对比了两边唯一不同的现象是,输入框点击的时候,因为键盘弹起,那个输入框所在的父元素高度很低,需要滑动才能看到里面的元素,本来默认选中input,该输入框会自动放在页面中间,可能因为父元素实在是太矮了,页面中看不到该input元素,尝试将该元素强制写一个最小高度,解决
头一次见到这种神奇的现象