vue antdesign 数字输入框失焦格式化金额 聚焦去掉格式化 如何在提交时保持原值不变提交没有格式化的数据

在Vue.js和Ant Design（AntD）中，你可以使用`<InputNumber>`组件结合自定义的方法来实现数字输入框的金额格式化和去格式化功能，并在表单提交时保持原始数值。

首先，安装AntD的InputNumber插件：

npm install @ant-design/components

然后，在Vue组件里，设置`onFocus`和`onBlur`事件处理函数，分别在聚焦和失焦时格式化和去格式化金额：

<template>
  <div>
    <a-input-number
      v-model.number="unformattedValue"
      :formatter="formatAmount"
      :parser="parseAmount"
      ref="inputNumber"
    ></a-input-number>
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      unformattedValue: '', // 原始未格式化的数值
    };
  },
  methods: {
    formatAmount(value) {
      // 格式化金额，例如：将数值转换为人民币格式（千位分隔符）
      return value.toFixed(2).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
    },
    parseAmount(value) {
      // 去格式化金额，恢复到原始数值格式
      return parseFloat(value.replace(/,/g, ''));
    },
    submitForm() {
      // 提交表单时使用原始未格式化的值
      const formattedValue = this.formatAmount(this.unformattedValue);
      console.log('提交：', formattedValue); // 发送或保存格式化后的值
      // 如果需要在后端直接接收原始值，可以使用ref对象获取当前值
      this.$refs.inputNumber.$emit('input', this.unformattedValue);
    },
  },
};
</script>

当用户输入时，输入框会自动应用格式化；而在提交表单时，通过`parseAmount`方法还原成原始数值并发送。注意这里我们使用了`v-model.number`绑定，确保输入的是数值类型。