el-Input输入数字自动转千分位进行展示

el-Input输入数字自动转千分位进行展示，存储值不变

子组件：

<template><el-input ref="inputRef" :disabled="disabled" clearable v-model="displayValue" v-bind="$attrs" @input="handleInput" @focus="handleFocus" @blur="handleBlur" @change="handleChange" @keydown="handleKeyDown" @compositionstart="handleCompositionStart" @compositionend="handleCompositionEnd"></el-input>
</template><script>
export default {name: 'AmountInput',props: {value: {type: [Number, String],default: null,},disabled: {type: Boolean,default: false,},// 新增精度控制属性precision: {type: Number,default: 2,},// 新增：是否启用大数模式（字符串处理）bigNumber: {type: Boolean,default: true,},},data() {return {displayValue: '',internalValue: null,isFocused: false,lastValidValue: null,isComposing: false, // 标记是否在中文输入法组合输入中};},watch: {value: {immediate: true,handler(newVal) {const parsed = this.parseInputValue(newVal);if (parsed !== this.internalValue) {this.internalValue = parsed;this.formatDisplayValue();}},},},mounted() {this.internalValue = this.parseInputValue(this.value);this.formatDisplayValue();},methods: {// 确保转换为字符串处理safeToString(value) {if (value === null || value === undefined) return '';return String(value);},// 处理中文输入法开始handleCompositionStart() {this.isComposing = true;},// 处理中文输入法结束handleCompositionEnd(e) {this.isComposing = false;this.handleInput(e.target.value);},// 处理大数字符串processBigNumber(numStr) {console.log(numStr, 'numStr');if (!numStr) return '';// 移除所有非数字字符（保留负号和小数点）let cleaned = numStr.replace(/[^\d.-]/g, '');// 分离符号、整数和小数部分const isNegative = cleaned.startsWith('-');if (isNegative) cleaned = cleaned.substring(1);const parts = cleaned.split('.');let integerPart = parts[0].replace(/^0+/, '') || '0';let decimalPart = parts.length > 1 ? parts[1] : '';// 截断小数部分if (decimalPart.length > this.precision) {decimalPart = decimalPart.substring(0, this.precision);}// 添加千分位integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');// 重新组合return (isNegative ? '-' : '') + integerPart + (decimalPart ? `.${decimalPart}` : '');},formatDisplayValue() {if (this.isFocused) {this.displayValue = this.internalValue !== null ? this.safeToString(this.internalValue) : '';} else {this.displayValue = this.formatNumber(this.internalValue);}},parseInputValue(value) {if (value === '' || value === null || value === undefined) return null;const numStr = this.safeToString(value).replace(/,/g, '').replace(/[^\d.-]/g, '');if (numStr === '-' || numStr === '.') return null;// 处理大数字符串if (numStr.length > 15) {return numStr; // 作为字符串返回，避免精度丢失}const num = Number(numStr);return isNaN(num) ? null : num;},// 修复科学计数法转换convertFromScientificNotation(num) {if (num === null || num === undefined) return null;// 如果是字符串形式的科学计数法if (typeof num === 'string' && num.includes('e')) {try {return Number(num).toString();} catch {return num;}}// 如果是数值型的科学计数法if (typeof num === 'number' && num.toString().includes('e')) {return num.toLocaleString('fullwide', { useGrouping: false });}return num.toString();},// 增强的数字格式化方法formatNumber(value) {if (value === null || value === undefined) return '';const numStr = this.safeToString(value);const isNegative = numStr.startsWith('-');const cleanStr = isNegative ? numStr.substring(1) : numStr;const parts = cleanStr.split('.');let integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');let decimalPart = parts.length > 1 ? parts[1].substring(0, this.precision) : '';return (isNegative ? '-' : '') + integerPart + (decimalPart ? `.${decimalPart}` : '');},validateInput(value) {if (value === '' || value === null) return true;return new RegExp(`^-?\\d*\\.?\\d{0,${this.precision}}$`).test(value);},handleInput(value) {if (this.isComposing) return; // 中文输入法组合期间不处理const strValue = this.safeToString(value);const filtered = strValue.replace(/[^\d.-]/g, '');// 处理多个小数点const decimalParts = filtered.split('.');let cleanedValue = decimalParts[0];if (decimalParts.length > 1) {cleanedValue += '.' + decimalParts.slice(1).join('').substring(0, this.precision);}// 处理负号if (cleanedValue.includes('-')) {cleanedValue = '-' + cleanedValue.replace(/-/g, '');}if (cleanedValue !== this.displayValue) {this.displayValue = cleanedValue;}const parsed = this.parseInputValue(cleanedValue);this.internalValue = parsed;this.lastValidValue = cleanedValue;this.$emit('input', parsed);},handleFocus() {this.isFocused = true;this.formatDisplayValue();this.$emit('focus');},handleBlur() {this.isFocused = false;const parsed = this.parseInputValue(this.displayValue);this.internalValue = parsed;this.formatDisplayValue();this.$emit('blur');this.$emit('change', parsed);},handleKeyDown(e) {const allowedKeys = [8,9,37,39,46,35,36, // 特殊键...(e.ctrlKey ? [65, 67, 86, 88] : []), // Ctrl组合键];if (/\d/.test(e.key) || allowedKeys.includes(e.keyCode) || (e.key === '.' && !this.displayValue.includes('.')) || (e.key === '-' && !this.displayValue.includes('-') && (this.displayValue === '' || e.target.selectionStart === 0))) return;e.preventDefault();},},
};
</script>

父组件

<currency-input :value="addFormData.advancePaymentAmt" big-number :precision="2" @input="handleAmountInput($event, 'advancePaymentAmt')"></currency-input>

function handleAmountInput(data: any, field: string, type?: string, cIndex?: number) {// if (type == 'navItem_total' || type == 'navItem') {// 	state.formData.prodNavs.forEach((fItem: any, fIndex: number) => {// 		if (fIndex == cIndex) fItem[field] = data;// 	});// } else {// 	state.formData[field] = data;// }state.formData[field] = data;
}