vue实现输入金额时
Vue 实现输入金额格式化
在Vue中实现金额输入格式化，通常需要处理用户输入时的实时校验、自动添加千分位分隔符、限制小数位数等。以下是几种常见实现方式：
自定义指令实现
通过Vue自定义指令监听输入框的input事件，对输入值进行格式化处理：
Vue.directive('money', {
bind(el, binding) {
el.addEventListener('input', (e) => {
let value = e.target.value.replace(/[^\d.]/g, '')
value = value.replace(/\.{2,}/g, '.')
value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
// 限制小数位数（默认2位）
const decimalDigits = binding.value || 2
if (value.indexOf('.') > -1) {
value = value.substring(0, value.indexOf('.') + decimalDigits + 1)
}
// 添加千分位
const parts = value.split('.')
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
e.target.value = parts.join('.')
})
}
})使用方式：
<input v-money="2" v-model="amount">使用计算属性与watch
通过计算属性和watch监听实现双向绑定下的金额格式化：
export default {
data() {
return {
rawAmount: '',
formattedAmount: ''
}
},
watch: {
rawAmount(newVal) {
this.formattedAmount = this.formatMoney(newVal)
}
},
methods: {
formatMoney(value) {
let num = value.replace(/[^\d.]/g, '')
if (num.indexOf('.') > -1) {
num = num.substring(0, num.indexOf('.') + 3)
}
const parts = num.toString().split('.')
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
return parts.join('.')
}
}
}模板中使用：
<input v-model="rawAmount">
<div>{{ formattedAmount }}</div>使用第三方库
对于更复杂的金额处理，推荐使用现成的库如accounting.js或currency.js：
安装currency.js：
npm install currency.js组件中使用：
import currency from 'currency.js'
export default {
data() {
return {
amount: currency(0)
}
},
methods: {
formatInput(value) {
this.amount = currency(value, {
symbol: '',
decimal: '.',
separator: ',',
precision: 2
})
}
}
}模板示例：
<input
:value="amount.format()"
@input="formatInput($event.target.value)"
>移动端键盘优化
针对移动端输入，可以指定输入类型为数字键盘：
<input
type="tel"
v-model="amount"
pattern="[0-9]*"
inputmode="numeric"
>结合上述格式化方法，可以优化移动端用户的输入体验。
注意事项
- 处理粘贴操作时可能需要额外的事件监听
- 国际化的金额格式需要考虑不同地区的分隔符习惯
- 对于负数的处理需要额外逻辑
- 清除输入时（如退格键）需要特殊处理
以上方法可根据实际项目需求组合使用，建议在复杂场景下优先考虑使用成熟的第三方库。
