小程序輸入框閃爍BUG解決方案

前言

本人所說的小程序，都是基於 mpvue框架而上的，所以 BUG多是原生小程序的，也有多是 mpvue的。

問題描述

在小程序input組件中，若是使用v-model進行雙向綁定，在輸入時會出現光標閃爍的BUG。

緣由

形成這個BUG的緣由，是由於在原生小程序input組件上，進行了封裝。才致使光標閃爍的問題。

解決方案

這裏提供了兩種解決方案。各有各的優點，請選取合適的方案：

1、棄用v-model,使用@input

適用於input組件單純是用戶手動輸入的，而沒有像受權獲取手機號，而後自動填入input組件中。這種須要賦予初始value的狀況。即適用於單向綁定，而不是雙向綁定。

/** 
* 父組件
*/

// html
<childInput @input="onInput"/> <-- 注意這裏不能使用:value=value賦予初始值，不然又會出現閃爍的BUG，由於此時就等同於v-model了

// js
import ChildInput from './ChildInput'
export default {
  components:{ ChildInput },
  data(){
    return {
      value:''
    }
  },
  methods(){
    onInput(e){
      this.value = e 
    }
  }
}

/** 
* 子組件 ChildInput
*/

// html

<input @input="$emit('input',$event)"/>

2、不封裝input組件，直接使用v-model

這種狀況就是能夠直接雙向綁定的了。具體緣由還不清楚，多是自己原生小程序的BUG。

/**
* 父組件,不使用封裝的子組件，直接使用原生組件。
*/

// html
<input v-model="value"/>

// js
export default {
  data(){
    return {
      value:''
    }
  }
}

原文連接： Rychou|小程序輸入框閃爍BUG解決方案