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);
    };
  },
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值