ElementUI中inputNumber计数器可以添加金额千分位吗？

Question

查到的资料基本都是input添加的千分位功能
几乎没有说计数器能不能添加千分位功能的。
因为项目里多处用到了inputNumber计数器
如果要全部替换成input的话工作量比较大
希望能得到相关经验大佬的解答

Answer 1

//添加一个自定义指令格式化金额
Vue.directive('money',{

bind(el, binding, vnode) {
  let val = Number(binding.value);
  val = (isNaN(val) ? '0.00' : (val / 100).toFixed(2) + '').split('.');
  val[0] = val[0].replace(/\B(?=(?:\d{3})+$)/g, ',');
  el.innerHTML = val.join('.');
}

})

<input v-money="money" />

Answer 2

指令可以解决问题，实现效果为失去焦点显示千分位，获取焦点显示数值，v-model获取的值为数值。

directives: {
      thousands: {
        inserted: function (el) {
          // 获取input节点
          if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
            el = el.getElementsByTagName('input')[0]
          }

          // 初始化时，格式化值为千分位
          const numberValue = parseFloat(el.value.replace(/,/g, ''))
          if (!isNaN(numberValue)) {
            el.value = numberValue.toLocaleString('zh', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2,
            })
          }

          // 聚焦时转化为数字格式（去除千分位）
          el.onfocus = () => {
            el.value = parseFloat(el.value.replace(/,/g, '')).toFixed(2)
          }

          // 失去焦点时转化为千分位
          el.onblur = () => {
            const onBlurValue = parseFloat(el.value.replace(/,/g, ''))
            if (!isNaN(onBlurValue)) {
              el.value = onBlurValue.toLocaleString('zh', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })
            }
          }
        },
      },
    },

在el-input-number中添加指令v-thousands