mpvue的自定义组件中运行$emit函数时输入框光标抖动的解决办法

Posted 2020-11-27 baimeishaoxia

记录一个mpvue中遇到的问题

遇到问题

//css
 <input type="number" v-model="value" @input="getValue">

//vue 
export default {
 data() {
      return {
        value: ‘‘
      }
    },
 methods:{
     getValue() {
        this.$emit(‘value‘, this.value);
      }
 }
}

在getValue中运行emit时输入框的光标抖动。光标闪烁这个问题一般可以用官网推荐的方法v-model.lazy修饰符解决，但是在此情况尝试无效。

解决办法

于是我用想象力，没错是想象力T_T|||。我想光标频繁闪烁是不是value被频繁操作，于是尝试断开emit和v-model的耦合关系，问题竟然真解决了...也是醉啊...

...
getValue() {
 var val = this.value;
 setTimeout(() => {
    this.$emit(‘value‘, val);
 }, 0)
},
...