vue实现输入金额

实现输入金额的Vue组件

在Vue中实现金额输入功能需要处理格式化、校验和用户交互。以下是实现方案：

金额输入基础实现

创建基本的金额输入组件，使用v-model进行双向绑定：

<template>
  <input 
    type="text" 
    v-model="displayValue"
    @input="handleInput"
    @blur="formatValue"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      displayValue: ''
    }
  },
  methods: {
    handleInput(e) {
      let value = e.target.value.replace(/[^\d.]/g, '')
      this.displayValue = value
      this.$emit('input', parseFloat(value || 0))
    },
    formatValue() {
      if (this.displayValue) {
        this.displayValue = parseFloat(this.displayValue).toFixed(2)
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.displayValue = val ? parseFloat(val).toFixed(2) : ''
      }
    }
  }
}
</script>

金额格式化处理

实现自动格式化显示，例如千位分隔符：

methods: {
  formatCurrency(value) {
    if (!value) return '0.00'
    const parts = parseFloat(value).toFixed(2).split('.')
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    return parts.join('.')
  },
  unformatCurrency(value) {
    return value.replace(/,/g, '')
  }
}

输入限制与校验

添加输入限制，防止非法字符：

handleInput(e) {
  let value = e.target.value
  // 只允许数字和单个小数点
  value = value.replace(/[^\d.]/g, '')
  // 限制小数点后两位
  if (value.indexOf('.') > -1) {
    const decimal = value.split('.')[1]
    if (decimal.length > 2) {
      value = value.substring(0, value.length - 1)
    }
  }
  // 限制只能有一个小数点
  const dots = value.match(/\./g)
  if (dots && dots.length > 1) {
    value = value.substring(0, value.length - 1)
  }
  this.displayValue = value
  this.$emit('input', parseFloat(value || 0))
}

完整组件示例

结合上述功能的完整组件：

<template>
  <div class="currency-input">
    <span v-if="prefix" class="prefix">{{ prefix }}</span>
    <input
      ref="input"
      type="text"
      :placeholder="placeholder"
      v-model="displayValue"
      @input="handleInput"
      @blur="formatValue"
      @focus="unformatValue"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: null
    },
    prefix: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '0.00'
    }
  },
  data() {
    return {
      displayValue: ''
    }
  },
  methods: {
    handleInput(e) {
      let value = e.target.value
      value = value.replace(/[^\d.]/g, '')

      const dots = value.match(/\./g)
      if (dots && dots.length > 1) {
        value = value.substring(0, value.length - 1)
      }

      if (value.indexOf('.') > -1) {
        const decimal = value.split('.')[1]
        if (decimal.length > 2) {
          value = value.substring(0, value.indexOf('.') + 3)
        }
      }

      this.displayValue = value
      this.$emit('input', value ? parseFloat(value) : null)
    },
    formatValue() {
      if (this.displayValue) {
        this.displayValue = this.formatCurrency(this.displayValue)
      }
    },
    unformatValue() {
      if (this.displayValue) {
        this.displayValue = this.unformatCurrency(this.displayValue)
      }
    },
    formatCurrency(value) {
      if (!value) return ''
      const parts = parseFloat(value).toFixed(2).split('.')
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
      return parts.join('.')
    },
    unformatCurrency(value) {
      return value.replace(/,/g, '')
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (val === null || val === '') {
          this.displayValue = ''
        } else {
          this.displayValue = this.formatCurrency(val)
        }
      }
    }
  }
}
</script>

<style>
.currency-input {
  display: flex;
  align-items: center;
}
.prefix {
  margin-right: 5px;
}
input {
  border: 1px solid #ddd;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
}
</style>

使用第三方库

对于更复杂的金额处理，可以考虑使用以下库：

• vue-currency-input：专门为Vue设计的货币输入组件
• accounting.js：提供强大的货币格式化功能
• currency.js：轻量级的货币处理库

安装和使用示例：

npm install vue-currency-input

<template>
  <currency-input v-model="amount" />
</template>

<script>
import { CurrencyInput } from 'vue-currency-input'

export default {
  components: {
    CurrencyInput
  },
  data() {
    return {
      amount: 0
    }
  }
}
</script>

这些实现方案提供了从基础到高级的金额输入功能，可以根据项目需求选择合适的实现方式。