前言

我提到的小程序都是基于mpvue框架的，所以bug可能是原生小程序或者mpvue。

问题描述

在小程序的输入组件中，如果使用v-model进行双向绑定，输入时光标会闪烁。

理由

这个BUG的原因是它被封装在原生applet的输入组件上。它会导致光标闪烁。

解决办法

这里提供了两种解决方案。各有各的优点，请选择合适的方案：

1.放弃v-model，使用@input

适用于输入组件，仅由用户手动输入，无需获得授权的手机号码，然后自动填充到输入组件中。这需要给出初始值。即适合单向绑定，不适合双向绑定。

/* * *父组件*///html childinput @ input=' on input '/-注意这里不能用：value=value给出初始值，否则会有闪烁的bug。此时，它相当于v-model//js从'导入子输入。/child input ' export default { components 3360 { child input }，data () {return {value:''}}，Methods () {oninput (e) {this。value=e}}}/* * *子组件child input *///html input @ input=' $ emit(' input '，$ event)'/其次，输入组件没有封装，直接使用v-model

在这种情况下，可以直接双向绑定。具体原因不清楚，可能是自身原生小程序的BUG。

/* * *父程序集，不要使用打包的子程序集，直接使用本机程序集。*///html输入v-model=' value'///js导出默认值{data () {return {value:''}}问题描述：输入框中的文本出现双图像，如下

在将输入框从失焦切换到对焦的过程中，我们可以清楚地看到问题的重影现象出现在输入框中。如上图，经过一番折腾，我找到了bug的错误原因，也就是初步的解决方案，仅供参考。

1.微信官方设计文档给出了字体大小的规范，最小11pt，我自己设置为10pt。改成11pt后，部分输入框不再出现重影，而是微信官方渲染的加粗效果

微信官方字体规格如下：

修改后的加粗效果如下：

3.扔一些输入框会有重影。仔细观察，继续学习。发现由于flex布局导致输入框长度不一致。我可以把输入框调整到同样的宽度，但是不知道为什么。你可以试试。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。