vue3-简单的千分位金额转换指令

Vue3实现千分位金额转换指令

原创于 2025-06-25 11:00:21 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

输入框输入数字后转换为千分位金额格式

使用vue3的自定义指令来完成

使用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);
    };
  },
};