vue微信公众号键盘收起后出现空白的解决办法

背景

使用mint以及element组件结合vue

内容

1、问题：vue微信公众号项目中键盘收起下部出现空白

2、步骤：点击手机号输入框，输入，再点击密码输入框，输入弹起的密码输入框消失后内容也消失。

3、解决办法

• 密码输入框去掉type=number,变成正常输入
• 将密码框变成点
• 添加出现空白处理方法

4、上代码

<mt-field type="number" :attr="{ maxlength: 20 }" v-model="username" 
@focus.native.capture="clearDialog()" @keyup.enter.native="login()" 
placeholder="请输入手机号"  @blur.native.capture="blurNative">                       
 </mt-field>

<mt-field :attr="{ maxlength:20}" v-model="password"                            
style="-webkit-text-security:disc;text-security:disc;"                            
@focus.native.capture="clearDialog()" @keyup.enter.native="login()" 
placeholder="请输入密码"  @blur.native.capture="blurNative">                        
</mt-field>

blurNative() {                
//最好适用于输入框在中部            
window.scrollTo({                    
top: window.pageYOffset,                    
behavior: 'smooth',                
});   
//或者直接用window.scrollTo(0, 0)           
},

5、拓展

//将密码框变成点
style="-webkit-text-security:disc;text-security:disc;"