1. 移动端适配，页面高度没有写死，使用 input 标签时，唤起的虚拟键盘导致页面顶起和压缩
-
原因：使用的 flex 布局，页面的高度是所有的元素的高度都是自适应的，高度未写死，当出现虚拟键盘时，会造成页面布局混乱，底部元素被顶起及 input 的上一个元素被压缩
before.jpeg
after.jpeg 解决思路，既然是高度没有写死的造成的，那么将高度写死不就好了么？
但是高度写死了，还怎么适配不同的手机？不能将高度写死
那么，它只在键盘唤起的那一刻需要高度，那么，我们在唤起键盘的那一刻将下面的元素隐藏掉，当键盘消失时再将元素显示出来
方案一： 使用 v-show 来控制元素的显示与隐藏
- click 时 isShow = false, 失去焦点时 isShow = true
// 带有 input 元素的 FormItem.vue
<input type="text"
class="input-notes"
:value="value"
@input="onValueChange($event.target.value)"
:placeholder="placeholder"
@click="$emit('update:isShow',false)"
@blur="$emit('update:isShow',true)"
>
// 调用 FormItem.vue 的组件 Money.vue
<Layout class-prefix="xxx" ref="layout" :is-show="isShow"> <--! 因为把底部组件放 Layout组件里，要给其传一个值-->
<NumberPad v-show="isShow"/> <--! 2. 控制要隐藏的变量 -->
<FormItem @update:isShow="(value) => {isShow=value}"/> <--! 3. 当触发input的click事件时，改变isShow的值 -->
<Tags :data-source.sync="tagsList" @update:selectedTag="selectedTag"/>
</Layout>
isShow = true // 1. 先定义一个变量 isShow，用来控制显示和隐藏
// Layout.vue 组件
<div class="layout-wrapper">
....
<Nav v-show="isShow"/>
</div>
props:['isShow']
效果：是解决了顶起和压缩问题，
引发问题：
- 但是要点击其它地方使 input 失去焦点，不然就会变成右边的图
- 且点击其它地方时页面会出现闪烁问题
- 在这里，会影响其它页面，为了实现这个，我必须在所有用到 Layout.vue 这个组件的地方，给其传一个属性
v-show="true"，不然的话，被isShow控制的那个组件就会不显示。
总结：这个方案既麻烦又不好用，特别是对于由好多组件组成的页面
1.jpeg
2.jpeg
方案二： window.onresize 时结合 v-show 来隐藏元素
- 那不通过判断input的状态，而是通过监听resize事件，当屏幕高度发生变化时，控制元素的隐藏展示
- 其它的和方案一一样
// Money.vue
height = document.body.clientHeight;
isShow = true
mounted(){
window.addEventListener('resize', ()=>{
if(document.body.clientHeight < height){
this.isShow = false
}else{
this.isShow = true
}
})
}
效果：解决了页面被顶起和压缩的问题
问题：
- 当虚拟键盘消失时，页面会有闪烁的情况出现
- 还是和方案一的问题三一样，维护比较麻烦
方案三：一进入页面，就将页面的高度固定下来
- 一进入页面就获取浏览器可视区的高度，然后把高度赋给根元素
// Money.vue
<Layout class-prefix="xxx" ref="layout" :style="{height:h+'px'}">
<NumberPad @update:value="onUpdateAmount" @submit="saveRecord" :x="record.tags"/>
<FormItem :value.sync="record.notes" name="备注" placeholder="请在这里输入备注"/>
<Tags :data-source.sync="tagsList" @update:selectedTag="selectedTag"/>
<template #head>
<Tabs :value.sync="record.type"/>
</template>
</Layout>
h = document.body.clientHeight;
效果： 所有问题完美解决，页面也不会有闪烁问题，特别简单.........
最后附上项目预览地址：项目 simpleBilling
