vue实现输入金额
金额输入框的实现方法
在Vue中实现金额输入框需要考虑格式化、校验和交互体验。以下是几种常见的实现方式：
基础实现方案
使用v-model绑定数据，配合@input事件处理格式化：
<template>
<input
v-model="amount"
@input="formatAmount"
type="text"
placeholder="请输入金额"
/>
</template>
<script>
export default {
data() {
return {
amount: ''
}
},
methods: {
formatAmount() {
this.amount = this.amount
.replace(/[^\d.]/g, '')
.replace(/\.{2,}/g, '.')
.replace(/^(\d*\.\d*).*$/, '$1')
}
}
}
</script>千分位格式化方案
实现金额的千分位显示：
<template>
<input
:value="formattedAmount"
@input="handleInput"
@blur="formatNumber"
type="text"
/>
</template>
<script>
export default {
data() {
return {
rawAmount: '',
formattedAmount: ''
}
},
methods: {
handleInput(e) {
this.rawAmount = e.target.value.replace(/[^0-9.]/g, '')
this.formattedAmount = this.rawAmount
},
formatNumber() {
if (!this.rawAmount) return
const num = parseFloat(this.rawAmount)
this.formattedAmount = num.toLocaleString('zh-CN', {
style: 'decimal',
maximumFractionDigits: 2
})
}
}
}
</script>使用第三方库
推荐使用v-money或vue-currency-input等专业库：
安装vue-currency-input：
npm install vue-currency-input使用示例：
<template>
<currency-input
v-model="amount"
:options="currencyOptions"
/>
</template>
<script>
import CurrencyInput from 'vue-currency-input'
export default {
components: { CurrencyInput },
data() {
return {
amount: 0,
currencyOptions: {
currency: 'CNY',
locale: 'zh-CN',
precision: 2,
autoDecimalMode: true
}
}
}
}
</script>金额校验方案
添加金额校验逻辑：
<template>
<input
v-model="amount"
@blur="validateAmount"
/>
<p v-if="error" class="error">{{ error }}</p>
</template>
<script>
export default {
data() {
return {
amount: '',
error: ''
}
},
methods: {
validateAmount() {
const regex = /^\d+(\.\d{1,2})?$/
if (!regex.test(this.amount)) {
this.error = '请输入有效的金额格式（最多两位小数）'
} else {
this.error = ''
}
}
}
}
</script>移动端优化方案
针对移动端设备显示数字键盘：
<template>
<input
v-model="amount"
type="tel"
pattern="[0-9]*"
inputmode="decimal"
/>
</template>以上方案可根据实际需求组合使用，专业项目建议采用第三方库以确保更好的兼容性和功能完整性。
