IOS 使用Vux的x-input时失去焦点问题

在开发过程中难免会遇见动态给x-input绑定的v-model赋值,笔者就在使用是出现了以下情况,废物不多说直接上图

在ios手机输入定金付款金额时输入到第二位会数字会自动失去焦点,随后在次点击才能继续输入但是输入一位数字的时候又失去焦点了,以此类推

代码

在一次次的排查中,问题锁定在了这个合计付款金额的x-input上,是因为这里totalMoney 是由监听其他金额计算得来的,在计算赋值过程中会把当前x-input的焦点丢失。笔者的解决办法是将x-input替换成其他标签,问题就解决了

改进后的代码

       
        
合计付款金额：{{$$formatMoney(totalMoney)}}

在p标签加上 class="weui-cell" 样式什么的都和x-input 一致了

笔者这里的$$formatMoney方面是封装的数字转换成金额的方法,直接上代码

 Vue.prototype.$$formatMoney = (str) => {
    if (!str && str != 0) {
      return ""
    }
    str = str + "";
    var newStr = "";
    var count = 0;

    if (str.indexOf(".") == -1) {
      for (var i = str.length - 1; i >= 0; i--) {
        if (count % 3 == 0 && count != 0) {
          newStr = str.charAt(i) + "," + newStr;
        } else {
          newStr = str.charAt(i) + newStr;
        }
        count++;
      }
      str = newStr + ".00"; //自动补小数点后两位
      return str
    } else {
      for (var i = str.indexOf(".") - 1; i >= 0; i--) {
        if (count % 3 == 0 && count != 0) {
          newStr = str.charAt(i) + "," + newStr; //碰到3的倍数则加上“,”号
        } else {
          newStr = str.charAt(i) + newStr; //逐个字符相接起来
        }
        count++;
      }
      str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
      return str
    }
  }

如果大家有更好的解决办法还请多多指教