输入框输入数字后转换为千分位金额格式
使用vue3的自定义指令来完成
这里先来准备两个函数,千分位转换函数 和 解析千分位字符串函数
// 千分位转换函数
const formatNumberToThousands = (num) => {
if (typeof num === 'undefined' || num === null || isNaN(num)) return '';
return Number(num).toLocaleString('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
});
};
// 解析千分位字符串为数字
const parseThousandsNumber = (str) => {
if (typeof str === 'undefind' || str === null || typeof str !== 'string') return 0;
const cleanedStr = str.replace(/,/g, '');
return isNaN(cleanedStr) ? 0 : Number(cleanedStr);
};
处理输入框格式,将无关的字符过滤掉
// 格式处理
function formatting(value) {
let inputValue = value.replace(/[^\d.-]/g, ''); // 只保留数字、小数点和负号
// 处理小数点,确保最多只有一个小数点
const dotIndex = inputValue.indexOf('.');
if (dotIndex !== -1) {
inputValue = inputValue.slice(0, dotIndex + 3); // 最多保留两位小数
}
return inputValue
}
指令内容
export default {
mounted(el, binding) {
const input = el.querySelector('input') || el;
const value = binding.value;
// 初始化显示千分位格式
input.value = formatNumberToThousands(value);
// 失去焦点时处理,转换为千分位格式
const handleBlur = (e) => {
const target = e.target;
target.value = formatting(target.value)
const parsedValue = parseThousandsNumber(target.value);
// 更新绑定的值
binding.instance[binding.arg] = parsedValue;
target.value = formatNumberToThousands(parsedValue);
};
input.addEventListener('blur', handleBlur);
// 解绑事件监听器
return () => {
// input.removeEventListener('input', handleInput);
input.removeEventListener('blur', handleBlur);
};
},
};