vue自定义指令实现千分位

Vue.directive('thousandInput', {
  // 指令的定义
  inserted: function (el, binding) {
    // 指令作用在 element-input 节点，对应原生 div.el-input (真实input节点的父节点)
    if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
      el = el.getElementsByTagName('input')[0]
    }
    // 带¥符号、保留2位小数+千分位
    // el.value = (Number(el.value)).toLocaleString('zh', {style:'currency', currency: 'CNY', minimumFractionDigits: 2});
    // 保留2位小数+千分位
    el.onblur = (e) => {
      if (!el.value) return 0
      el.value = parseFloat(el.value).toLocaleString('en-US', { 'minimumFractionDigits': 2, 'maximumFractionDigits': 2 })
    }
    el.onfocus = (e) => {
      if (!el.value) return 0
      const str = el.value.replace(/,/g, '')
      el.value = parseFloat(str)
    }
    if (!el.value) return 0
    el.value = parseFloat(el.value).toLocaleString('en-US', { 'minimumFractionDigits': 2, 'maximumFractionDigits': 2 })
  }
})

v-thousandInput使用自定义指令，不使用v-model做双向数据流动，保持m层的数据不变，直接修改v层，vm层也监听不到。实现了视图层展示带千分位的字符串，而发送给后端的数据仍然为数值。

还使用到了一个很好用的方法，toLocaleString。