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

Posted 晚星@

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue输入框输入数字后自动转换为金额格式相关的知识,希望对你有一定的参考价值。

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;
    

效果图:

失去焦点后

以上是关于vue输入框输入数字后自动转换为金额格式的主要内容,如果未能解决你的问题,请参考以下文章

求一个正则表达式只能输入数字小数点后两位和

js数字金额滚动动画(vue)

vue输入金额,仅输入数字并且保留两位小数

在Excel中如何将数字格式批量转换为文本格式,并且保留二位小数?

iOS “金额” 输入框的设置

如何使用WPS表格功能将人民币自动生成大写