在vue项目中千分位展示输入金额，获取金额千分位，金额大写的方法

实现效果：

• 在用户输入完成input失焦的时候，input文本框中显示的是千分位格式的金额；在用户再次聚焦的input文本框时，文本框中展示的是正常的金额值，用户可以修改金额，失焦的时候再次千分位展示。

思路：

• 用两个变量，一个变量负责展示，一个变量存储实际的值，保证在任何情况下，实际值不受影响，展示按需求去展示

main.js中引入公共方法

import validate from '@/utils/validate';
Vue.prototype.$validate = validate
Vue.use(validate)

validate.js方法

export default {
	//金额转换为千分位
  formatCurrency(value, str) {
    if (!str) str = '';
    // str 规定货币类型
    if (value == "0") return '0.00';
    if(value == ".") return '';
    if (!value) return '';
    let val = Number(value).toFixed(2) // 提前保留两位小数
    let intPart = parseInt(val) // 获取整数部分
    let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断 ？？？
    let floatPart = '.00' // 预定义小数部分
    val = val.toString() // 将number类型转为字符串类型，方便操作
    let value2Array = val.split('.')
    if (value2Array.length === 2) { // =2表示数据有小数位
      floatPart = value2Array[1].toString() // 拿到小数部分
      if (floatPart.length === 1) { // 补0,实际上用不着
        return str + intPartFormat + '.' + floatPart + '0'
      } else {
        return str + intPartFormat + '.' + floatPart
      }
    } else {
      return str + intPartFormat + floatPart
    }
  },
//限制输入金额
  inputLimitAmount(val,digit){
    digit = digit || 12;
    let res = "";
    if(!val) return "";
    if(val == ".") return "";
    let matchArr = val.match(/\./g);
    if(matchArr && matchArr.length>1){
      res = null;
    }else{
      if(val.split('.')[0].length > digit){
        res = null;
      }else{
        res = val.split('.')[1] && val.split('.')[1].length > 2 ? val.split('.')[0] + '.' +  val.split('.')[1].slice(0,2) : val;
      }
    }
    return res ? res.replace(/[^0-9.]/g,"") : res;
  },
  // ======== 限制金额的输入及千分位展示 start============
  formatAmountFocus(_attr, dataForm){
    let that = _attr+'F';
    dataForm[that] = dataForm[_attr];
  },
  formatAmountInput(_attr, dataForm, digit){
    let that = _attr+'F';
    let $thisVal = dataForm[_attr];
    let $thatVal = dataForm[that];
    let dig = digit ? digit : 12;
    let formateVal = this.inputLimitAmount($thatVal,dig);
    if(formateVal == null){
      dataForm[that] = $thisVal
    }else{
      dataForm[that] = formateVal;
      dataForm[_attr] = formateVal ? Number(formateVal).toFixed(2) : formateVal;
    }
  },
  formatAmountBlur(_attr, dataForm){
    let that = _attr+'F';
    dataForm[that] = this.formatCurrency(dataForm[that]);
  },
  //  ======== 限制金额的输入及千分位展示 end======== 
  //获取金额大写的方法
	getMoneyHanzi(n) {
	  if ((!n && n==="") || (!n && n!=0)) return;
	  let str = 0
	  n = typeof n === 'number' ? n + '' : n
	  str = n.substring(n.indexOf('.') + 1, n.indexOf('.') + 3)
	  let fraction = ['角', '分']
	  let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
	  let unit = [['元', '万', '亿'], ['', '拾', '佰', '仟']]
	  let s = ''
	  for (let i = 0; i < fraction.length; i++) {
	    if (i === 0) {
	      s += (digit[parseInt(n * 10 * Math.pow(10, i) % 10)] + fraction[i]).replace(/零./, '')
	    } else if (i === 1) {
	      if (str.length === 2) {
	        if (str.substring(0, 1) === '0') {
	          s = '零角'
	        }
	        if (str.substring(0, 2) === '00') {
	          s = '整'
	        }
	      }
	      s += (digit[(n * 10 * Math.pow(10, i) % 10).toFixed(0)] + fraction[i]).replace(/零./, '')
	    }
	  }
	  s = s || '整'
	  n = Math.floor(n);
	  //区分小数点左边是否有值（解决分位显示零几分缺陷）
	  let flag = n; 
	  for (let i = 0; i < unit[0].length && n > 0; i++) {
	    let p = ''
	    for (let j = 0; j < unit[1].length && n > 0; j++) {
	      p = digit[n % 10] + unit[1][j] + p
	      n = Math.floor(n / 10)
	    }
	    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
	  }
	  let sum = flag == 0?s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '').replace(/^整$/, '零元整'):s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整')
	  return sum
	}

}

组件中引用

 <el-form-item label="单笔限额(元)">
   <el-input 
    	v-model="form.tranLmtF" 		
    	@focus="focus_Amount('tranLmt',$event)"
      	@input="inpLimit_Amount('tranLmt')" 	
      	@blur="getFormate_Amount('tranLmt')">
    </el-input>
 </el-form-item>

focus_Amount(filedName,ele) {
  this.$validate.formatAmountFocus(filedName, this.form);
  //下面这段代码是为了解决在IE11上为input赋值后，光标聚焦到最左侧的问题
  let obj = ele.srcElement;
  if(obj.setSelectionRange){
    obj.setSelectionRange(obj.value.length,obj.value.length);
  }else{
    var range = obj.createTextRange();
    range.collapse(true);
    range.moveStart("character",obj.value.length);
    range.moveEnd("character",0);
    range.select();
  }
},
inpLimit_Amount(filedName) {
  this.$validate.formatAmountInput(filedName, this.form);
},
// blur
getFormate_Amount(filedName) {
  this.$validate.formatAmountBlur(filedName, this.form);
  if( this.form[filedName] == "" ){
    this.form[filedName] = "0";
    this.form[filedName + 'F'] = "0.00";
  }
},