当前位置：首页 > VUE

vue实现输入金额

2026-01-15 23:54:17VUE

实现输入金额功能

在Vue中实现金额输入功能需要考虑格式化、校验和交互体验。以下是常见的实现方法：

金额输入框组件

创建一个可复用的金额输入组件，支持自动格式化和校验：

<template>
  <input
    type="text"
    v-model="displayValue"
    @input="handleInput"
    @blur="formatValue"
    placeholder="0.00"
  />
</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, '')
      value = value.replace(/(\..*)\./g, '$1')
      this.displayValue = value
      this.$emit('input', parseFloat(value || 0))
    },
    formatValue() {
      const num = parseFloat(this.displayValue || 0)
      this.displayValue = num.toFixed(2)
      this.$emit('input', num)
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.displayValue = newVal ? parseFloat(newVal).toFixed(2) : ''
      }
    }
  }
}
</script>

金额格式化过滤器

添加全局过滤器处理金额显示：

// main.js
Vue.filter('currency', function(value) {
  if (!value) return '0.00'
  const num = parseFloat(value)
  return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
})

使用方式：

<template>
  <div>{{ amount | currency }}</div>
</template>

金额输入验证

添加表单验证规则：

export default {
  data() {
    return {
      amount: '',
      rules: {
        amount: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { 
            validator: (rule, value, callback) => {
              if (!/^\d+(\.\d{1,2})?$/.test(value)) {
                callback(new Error('请输入正确的金额格式'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]
      }
    }
  }
}

数字键盘实现

对于移动端，可以限制输入类型为数字：

<template>
  <input 
    type="number"
    pattern="[0-9]*"
    inputmode="numeric"
    v-model="amount"
  />
</template>

金额输入优化

添加千分位分隔符显示：

methods: {
  formatCurrency(value) {
    const num = parseFloat(value.replace(/[^\d.]/g, ''))
    if (isNaN(num)) return ''
    return num.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')
  },
  parseCurrency(value) {
    return parseFloat(value.replace(/[^\d.]/g, ''))
  }
}

这些方法可以组合使用，根据具体需求选择适合的方案来实现Vue中的金额输入功能。

vue实现输入金额