アプレットで入力ボックスが点滅するためのバグソリューション

序文

私は小さなプログラムは、に基づいていると言う mpvue 枠組みとで、そのため BUG の小さなプログラムのネイティブであってもよいし、があるかもしれません mpvue 。

問題の説明

アプレットinputコンポーネントでは、v-model双方向バインディングを使用している場合、入力するとカーソルが点滅しますBUG。

理由

このバグの理由はinput、ネイティブアプレットコンポーネントにカプセル化されているためです。これにより、カーソルが点滅します。

解決策

ここでは2つのソリューションが提供されています。それぞれに独自の利点があります。適切なソリューションを選択してください：

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

この場合、2つの方向に直接バインドできます。具体的な理由は不明ですが、ネイティブアプレットのバグである可能性があります。

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

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

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

元のリンク： Rychou |小さなプログラム入力ボックスの点滅のためのBUGソリューション