vue输入框输入数字后自动转换为金额格式

Posted 2022-04-22 晚星@

template

<a-input 
   v-model="tableData[scope.$rowIndex][item.type]"
   @focus="uninputMoney($event,scope.$rowIndex,item.type)"
   @blur="inputMoney($event,scope.$rowIndex,item.type)">
</a-input>

script

/**  输入框转金额的代码   */
    // 失去焦点金额格式化
    inputMoney (el, index, type) 
      let temp = Number(el.target.value) || null;
      this.tableData[index][type] = this.priceFormat(temp)
    ,
    // 获得焦点金额去掉格式
    uninputMoney (el, index, type) 
      if (!!el.target.value) 
        this.tableData[index][type] = this.delcommafy(el.target.value)
       else 
        this.tableData[index][type] = null
      
    ,
    priceFormat (num, n) 
      n = n || 2;
      let symbol = ",";
      if (num === null) return num;
      if (typeof num !== 'number') throw new TypeError('num参数应该是一个number类型');
      if (n < 0) throw new Error('参数n不应该小于0');
      let hasDot = parseInt(num) != num;//这里检测num是否为小数，true表示小数
      let m = (n != undefined && n != null) ? n : 1;
      num = m == 0 ? num.toFixed(m) + '.' : hasDot ? (n ? num.toFixed(n) : num) : num.toFixed(m);
      symbol = symbol || ',';
      num = num.toString().replace(/(\\d)(?=(\\d3)+\\.)/g, function (match, p1, p2) 
        return p1 + symbol;
      );
      if (n == 0 || (!hasDot && !n)) //如果n为0或者传入的num是整数并且没有指定整数的保留位数，则去掉前面操作中的小数位
        num = num.substring(0, num.indexOf('.'));
      
      return num;
    ,
    //去除千分位中的‘，’
    delcommafy (num) 
      if (!num) return num;
      num = num.toString();
      num = num.replace(/,/gi, '');
      if (num.indexOf('.00') > 0) num = parseInt(num);
      return num;
    

效果图：

失去焦点后