Ant Design Vue Input 格式化提示

我们通常会遇到这样一种场景，输入一串条码为了用户可以方便校对需要把这串字符串进行格式化（比如逗号或者-符号隔开）

格式化提示

<template>
  <a-tooltip :trigger="['focus']" placement="topLeft" overlayClassName="numeric-input">
    <span slot="title" v-if="value" class="numeric-input-title">
      {{ value !== '-' ? formatNumber(value) : '-' }}
    </span>
    <template slot="title" v-else>
      Input a number
    </template>
    <a-input
      :value="value"
      @change="onChange"
      @blur="onBlur"
      placeholder="Input a number"
      :maxLength="25"
      style="width: 120px"
    />
  </a-tooltip>
</template>
<script>
function formatNumber(value) {
  value += '';
  const list = value.split('.');
  const prefix = list[0].charAt(0) === '-' ? '-' : '';
  let num = prefix ? list[0].slice(1) : list[0];
  let result = '';
  while (num.length > 3) {
    result = `-${num.slice(-3)}${result}`;
    num = num.slice(0, num.length - 3);
  }
  if (num) {
    result = num + result;
  }
  return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
}

export default {
  data() {
    return {
      value: '',
    };
  },
  methods: {
    formatNumber,
    onChange(e) {
      const { value } = e.target;
      const reg = /^-?[0-9]*(\.[0-9]*)?$/;
      if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
        this.value = value;
      }
    },
    // '.' at the end or only '-' in the input box.
    onBlur() {
      const { value, onChange } = this;
      let valueTemp = value;
      if (value.charAt(value.length - 1) === '.' || value === '-') {
        onChange({ value: value.slice(0, -1) });
      }
    },
  },
};
</script>
<style>
/* to prevent the arrow overflow the popup container,
or the height is not enough when content is empty */
.numeric-input .ant-tooltip-inner {
  min-width: 32px;
  min-height: 37px;
}

.numeric-input .numeric-input-title {
  font-size: 14px;
}
</style>