vue中金额格式化 失去焦点格式化 获得焦点去格式化 全局注册

/**
 * 金额格式化
 * @returns {string}
 */
const reg = /^(-)?(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$$/

// 格式化金额
tools.amountFormat = function (value) {
  try {
    if (!value) return ''
    value = value.toString()
    if (value && value.includes(',')) return value
    let intPart = Number(value) - Number(value) % 1 // 获取整数部分（这里是windy93的方法）
    let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断

    let floatPart = '.00' // 预定义小数部分
    let value2Array = value.toString().split('.')

    // =2表示数据有小数位
    if (value2Array.length === 2) {
      floatPart = value2Array[1].toString() // 拿到小数部分

      if (floatPart.length === 1) { // 补0,实际上用不着
        return intPartFormat + '.' + floatPart + '0'
      } else {
        return intPartFormat + '.' + floatPart
      }
    } else {
      return intPartFormat + floatPart
    }
  } catch (e) {
    console.log(e)
  }
}

// 获得焦点去格式化
tools.amountFormatInputCancel = function (value) {
  if (!value) return ''
  if (value.split('.')[1] === '00' || value.split('.')[1] === '0') {
    return value.split('.')[0].replace(/,/g, '')
  } else {
    if (reg.test(value.replace(/,/g, ''))) {
      return value.replace(/,/g, '')
    } else {
      return value
    }
  }
}

// 失去焦点格式化
tools.amountFormatInput = function (value) {
  if (!value) return ''
  if (reg.test(value)) {
    return tools.amountFormat(value)
  } else {
    return value
  }
}

// 只能输入数字 @keyup事件中使用
tools.inputNumber = function (value) {
  return value.replace(/[^0-9.]/g,"").replace(/(\.)(\d*)(\1*)/g,"$1$2")
}

/**
 * 导出
 * @returns {string}
 */
export default {
  install (Vue) {
    Vue.prototype.$tools = tools
  }
}

想要全局使用还需要在mine.js中use注册一下

import tools from './tools.js'
Vue.use(tools)

下边是使用方法 (由于在template中，所以不需要加this)

<el-input
	v-model="num"
	@blue="num = $tools.amountFormatInput(num)"
    	@focus="num = $tools.amountFormatInputCancel(num)"
    	@keyup.navite="num = $tools.inputNumber(num)"
></el-input>