官方显示,cover-view是无法兼容input标签的
不过依然可以取巧,一样可以实现input的输入效果,
问题有两个,一个是控制台报错,
还有一个是input的光标不能显示出来
当前内容是基于美团的mpvue框架,和原生小程序略有差异,不过原理相通
正文开始
html如下
css如下
这里input标签里面,一个left位移是因为在安卓机器下,会出现cover-view内的内容和input标签内容出现重复,有重影的样式问题,在ios就没有,这个是兼容问题
input标签设置opacity 0也没有用
js如下
blurInput方法是用来在键盘消失后,也就是input失去焦点后,手动把
焦点变量置为false
getFocus方法是用户每次点击输入框的时候重新拉起键盘,输入内容
原因input标签的拉取键盘,获取焦点的机制默认是有效的,但是在添加focus属性后,控制焦点的false->true在失去焦点后,不会自动为false,必须手动重置
最后,通过watch来监听变化,把input输入的东西同步到cover-view上
有同层渲染之后,就不需要使用<cover-view />了吧