评论

cover-view下使用input输入文本内容

cover-view与input相融

官方显示,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上

最后一次编辑于  2019-11-25  
点赞 1
收藏
评论

1 个评论

  • DUO
    DUO
    2020-04-02

    有同层渲染之后,就不需要使用<cover-view />了吧

    2020-04-02
    赞同
    回复 2
    • white
      white
      2020-04-08
      如果页面内有canvas,依然需要cover-view
      2020-04-08
      回复
    • ElPsyCongroo
      ElPsyCongroo
      2023-08-17回复white
      canvas2d也是同层渲染
      2023-08-17
      回复
登录 后发表内容