)
方案一：自定义指令（推荐，可复用）
<template> <!-- 使用自定义指令，精度(14,6) --> <el-input v-model="decimalValue" v-decimal="{ maxInt: 14, maxDecimal: 6 }" placeholder="整数最多14位，小数最多6位" /> <!-- 可配置不同精度 --> <el-input v-model="priceValue" v-decimal="{ maxInt: 8, maxDecimal: 2 }" placeholder="价格(8,2)" /> </template> <script setup> import { ref } from 'vue' // 自定义指令 const vDecimal = { mounted(el, binding) { const input = el.querySelector('input') if (!input) return const config = { maxInt: binding.value?.maxInt || 14, // 最大整数位数 maxDecimal: binding.value?.maxDecimal || 6, // 最大小数位数 allowNegative: binding.value?.allowNegative ?? true, allowZeroStart: binding.value?.allowZeroStart ?? false } input.addEventListener('input', (e) => { handleDecimalInput(e.target, config) }) input.addEventListener('blur', (e) => { formatDecimalValue(e.target, config) }) } } // 处理输入 const handleDecimalInput = (input, config) => { let value = input.value // 允许的字符：数字、小数点、负号 const allowedChars = config.allowNegative ? /[0-9.-]/g : /[0-9.]/g const filtered = value.match(allowedChars)?.join('') || '' // 处理多个负号 let processedValue = filtered if (config.allowNegative) { const dashCount = (processedValue.match(/-/g) || []).length if (dashCount > 1) { processedValue = '-' + processedValue.replace(/-/g, '') } if (processedValue.includes('-') && processedValue.indexOf('-') > 0) { processedValue = processedValue.replace(/-/g, '') } } // 处理多个小数点 const parts = processedValue.split('.') if (parts.length > 2) { processedValue = parts[0] + '.' + parts.slice(1).join('') } // 拆分整数和小数部分 const [integerPart = '', decimalPart = ''] = processedValue.split('.') // 限制整数部分长度 const limitedInteger = integerPart.slice(0, config.maxInt) // 限制小数部分长度 const limitedDecimal = decimalPart.slice(0, config.maxDecimal) // 重新组合 let result = limitedInteger if (limitedDecimal) { result += '.' + limitedDecimal } // 不允许以0开头（除非是0.xxx） if (!config.allowZeroStart && result.length > 1 && result.startsWith('0') && !result.startsWith('0.')) { result = result.substring(1) } if (result !== value) { input.value = result input.dispatchEvent(new Event('input')) } } // 格式化值 const formatDecimalValue = (input, config) => { let value = input.value if (value === '' || value === '-' || value === '.') { input.value = '' return } // 处理以小数点开头的情况 if (value.startsWith('.')) { value = '0' + value } if (value.startsWith('-.')) { value = '-0' + value.slice(1) } // 确保小数位数为配置的位数 const parts = value.split('.') if (parts.length === 2) { parts[1] = parts[1].padEnd(config.maxDecimal, '0').slice(0, config.maxDecimal) value = parts.join('.') } input.value = value input.dispatchEvent(new Event('input')) } const decimalValue = ref('') const priceValue = ref('') </script>方案二：封装为组件（功能完整）
<!-- DecimalInput.vue --> <template> <el-input v-model="displayValue" v-bind="$attrs" @input="handleInput" @blur="handleBlur" @keydown="handleKeydown" /> </template> <script setup> import { ref, computed, watch, nextTick } from 'vue' const props = defineProps({ modelValue: [String, Number], maxInt: { // 最大整数位数 type: Number, default: 14 }, maxDecimal: { // 最大小数位数 type: Number, default: 6 }, allowNegative: { type: Boolean, default: true }, integerOnly: { // 是否只允许整数 type: Boolean, default: false }, trimZero: { // 是否去除末尾的0 type: Boolean, default: false } }) const emit = defineEmits(['update:modelValue', 'change']) // 显示值 const displayValue = ref('') // 同步外部值 watch(() => props.modelValue, (val) => { if (val !== undefined && val !== null) { displayValue.value = val.toString() } }, { immediate: true }) // 处理输入 const handleInput = (value) => { if (value === '') { updateValue('') return } // 构建正则表达式 const pattern = props.allowNegative ? /^-?\d*\.?\d*$/ : /^\d*\.?\d*$/ if (!pattern.test(value)) { // 回退到上一次有效值 nextTick(() => { displayValue.value = props.modelValue?.toString() || '' }) return } // 检查长度限制 const parts = value.split('.') const integerPart = parts[0].replace('-', '') const decimalPart = parts[1] || '' // 验证整数部分长度 if (integerPart.length > props.maxInt) { const limitedInteger = integerPart.slice(0, props.maxInt) const limitedValue = (value.startsWith('-') ? '-' : '') + limitedInteger if (decimalPart) { displayValue.value = limitedValue + '.' + decimalPart } else { displayValue.value = limitedValue } updateValue(displayValue.value) return } // 验证小数部分长度 if (decimalPart.length > props.maxDecimal) { const limitedDecimal = decimalPart.slice(0, props.maxDecimal) displayValue.value = parts[0] + '.' + limitedDecimal updateValue(displayValue.value) return } // 如果设置为只允许整数，移除小数点 if (props.integerOnly && value.includes('.')) { displayValue.value = value.replace('.', '') updateValue(displayValue.value) return } updateValue(value) } // 处理键盘事件 const handleKeydown = (e) => { // 阻止非数字、小数点、负号、控制键的输入 const allowedKeys = [ 'Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'Home', 'End', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown' ] if (allowedKeys.includes(e.key)) { return } // 允许的数字和小数点 if (/[0-9]/.test(e.key)) { return } // 允许小数点 if (e.key === '.' && !props.integerOnly) { const currentValue = displayValue.value if (!currentValue.includes('.')) { return } } // 允许负号 if (e.key === '-' && props.allowNegative) { const currentValue = displayValue.value if (!currentValue.includes('-')) { return } } e.preventDefault() } // 处理失去焦点 const handleBlur = () => { if (!displayValue.value || displayValue.value === '-' || displayValue.value === '.') { updateValue('') return } // 处理以小数点开头的情况 let value = displayValue.value if (value.startsWith('.')) { value = '0' + value } if (value.startsWith('-.')) { value = '-0' + value.slice(1) } // 补全小数位数 const parts = value.split('.') if (parts.length === 2) { if (props.trimZero) { // 去除末尾的0 parts[1] = parts[1].replace(/0+$/, '') if (parts[1] === '') { value = parts[0] } else { value = parts[0] + '.' + parts[1] } } else { // 补0到指定长度 parts[1] = parts[1].padEnd(props.maxDecimal, '0').slice(0, props.maxDecimal) value = parts.join('.') } } displayValue.value = value updateValue(value) } // 更新值 const updateValue = (value) => { emit('update:modelValue', value) emit('change', value) } </script>使用封装组件
<template> <div class="form-container"> <!-- 精度(14,6) --> <el-form-item label="金额(14,6)"> <DecimalInput v-model="form.amount" :max-int="14" :max-decimal="6" placeholder="请输入金额，整数最多14位，小数最多6位" /> </el-form-item> <!-- 精度(8,2) --> <el-form-item label="单价(8,2)"> <DecimalInput v-model="form.price" :max-int="8" :max-decimal="2" placeholder="单价，保留2位小数" /> </el-form-item> <!-- 只允许整数 --> <el-form-item label="数量"> <DecimalInput v-model="form.quantity" :max-int="8" :integer-only="true" placeholder="请输入数量" /> </el-form-item> <!-- 不允许负数 --> <el-form-item label="百分比(0-100)"> <DecimalInput v-model="form.percentage" :max-int="3" :max-decimal="2" :allow-negative="false" placeholder="0-100，保留2位小数" /> </el-form-item> </div> </template> <script setup> import { reactive } from 'vue' import DecimalInput from './DecimalInput.vue' const form = reactive({ amount: '', price: '', quantity: '', percentage: '' }) </script>
