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

前言

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

問題描述

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

原因

造成這個BUG的原因，是因為在原生小程序input組件上，進行了封裝。才導致光標閃爍的問題。

解決方案

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

一、棄用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)"/>

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

這種情況就是可以直接雙向綁定的了。具體原因還不清楚，可能是本身原生小程序的BUG。

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

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

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

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