vue 金额组件，输入提示单位：‘千’、‘万’、‘十万’...并用‘，’三个格式化

近期项目中遇到一个需求，金额输入框，输入过程中自动提示‘千’、‘万’、‘十万’、‘百万’......等单位提示，鼠标失去焦点后，并用‘,’三位隔开计数。

例如：

输入：12345.99

失去焦点：12,345.99

放一张图展示下效果吧

直接贴代码吧

封装的组件inputCurrency.vue

<template>
  <el-tooltip :manual="manual" popper-class="elInputCurrency" v-model="tooltipModel"
              class="elInputCurrency" effect="light" :content="numberDigit" placement="top-start">
    <el-input
        v-if="!readonly || readOnlyBorder"
        placeholder="请输入"
        :disabled="disabled"
        :readonly="readonly"
        v-show="show"
        @blur="blur"
        @focus="focus"
        @input="inputCurrency"
        :value="innerVal"
    >
    </el-input>
    <span v-else>{{
        innerVal
      }} 元</span>
  </el-tooltip>
</template>
<script>
export default {
  name: 'InputCurrency',
  props: {
    value: {
      type: [Number, String],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    show: {
      type: Boolean,
      default: true
    },
    readOnlyBorder: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      manual: true,
      tooltipModel: false,
      numberDigit: '',
      innerVal: ''
    }
  },
  computed: {},
  watch: {
    value(n) {
      if (this.readonly) {
        this.inputCurrency(this.value);
      }
    }
  },
  mounted() {
    this.innerVal = this.formatterNumber(this.value);
    if (this.readonly) {
      this.inputCurrency(this.innerVal);
    }
  },
  methods: {
    inputCurrency(value) {
      const self = this;
      value = value.toString();
      value = value.replace(/[^0-9.]/g, '');
      value = value.replace(/^(\-)*(\d+)\.(\d{2}).*$/, '$1$2.$3');
      const data = parseInt(value).toString();
      const moneyText = ['千', '万', '十万', '百万', '千万', '亿', '十亿', '百亿', '千亿', '万亿'];
      const maxValue = 14;
      if (data.length > 3 && data.length < maxValue) {
        self.tooltipModel = this.readonly ? false : true;
        self.manual = false;
        self.numberDigit = moneyText[data.length - 4];
      } else if (data.length > maxValue - 1) {
        value = self.value;
        self.numberDigit = moneyText[moneyText.length - 1];
      } else {
        self.manual = true;
        self.tooltipModel = false;
        self.numberDigit = '';
      }
      let val = (value && value.split("")) || [];
      this.innerVal = val.join("").match(/^\d*(\.?\d{0,2})/g)[0] || '';
      // this.innerVal = this.formatterNumber(this.innerVal);
      if (!this.readonly) {
        self.$emit('change', this.innerVal);
      }
    },
    inputChange(value) {
      let inputValue = this.value;
      inputValue = Number(value).toFixed(2).toString();
      this.innerVal = this.formatterNumber(inputValue);
      this.$emit('change', inputValue);
    },
    blur() {
      this.inputChange(this.value.toString());
      this.$emit('blur');
    },
    focus() {
      this.innerVal = this.formatterNumber(this.value);
      if (typeof (this.innerVal) === 'number') {
        this.innerVal = this.innerVal.toString();
      }
      this.$emit('change', this.value);
      this.$emit('focus');
    },
    formatterNumber(cellValue) {
      const val = parseFloat(cellValue)
          .toFixed(2)
          .toString()
          .split('')
          .reverse()
          .join('')
          .replace(/(\d{3})/g, '$1,')
          .replace(/\,$/, '')
          .split('')
          .reverse()
          .join('');
      return val;
    }
  },
}
</script>
<style scoped>
.el-input.el-input-group {
  display: inline-table !important;
}

.el-input.el-input-group /deep/ .el-input-group__append {
  background-color: transparent;
  color: #303133;
}

.el-input /deep/ .el-input__inner {
  border: 1px solid #dcdfe6 !important;
}

.el-input:before {
  content: '元';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #303133;
}

.el-input /deep/ input {
  padding-right: 0px;
}

.el-input /deep/ .el-input__suffix {
  margin: 1px 17px auto 0;
}

.el-input /deep/ .el-input__icon {
  line-height: 29px;
}

span.elInputCurrency {
  line-height: 30px;
  color: #112B50;
  font-size: 14px;
  font-family: 微软雅黑;
}
</style>
<style>
.elInputCurrency.el-tooltip__popper.is-light {
  background-color: #fff;
  color: #505960;
  border: 1px solid #d5d9dc;
  box-shadow: 0 0 8px 0 #000000;
  width: 40px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  padding: 0px;
}

.elInputCurrency.el-tooltip__popper.is-light .popper__arrow {
  left: 39% !important;
  margin-left: -6px;
  border-top-color: #D5D9DC !important;
}

.elInputCurrency.el-tooltip__popper.is-light .popper__arrow::after {
  border-top-color: #fff;
}
</style>

组件使用

<template>
  <div style="width: 300px">
    <span>金额：</span>
    <input-currency style="display: inline-block;width: 200px;" class="detail-value-width" :value="value"
                    :disabled="disabledFlag"
                    @change="onchange" :readonly="readFlag" :show="showFlag"></input-currency>
  </div>
</template>

<script>
import inputCurrency from "@/components/inputCurrency";

export default {
  name: "demoForCurrency",
  components: {
    inputCurrency
  },
  data() {
    return {
      value: '12345.99',
      disabledFlag: false,
      readFlag: false,
      showFlag: true
    }
  },
  methods: {
    onchange(value) {
      this.value = value;
    }
  }
}
</script>