vue自定义一个指令实现el-input-number组件显示千分号，但实际拿到的值是number类型

下面先简单实现聚焦输入时是数字，失焦时展示千分号，但实际拿到的值也还是数字；

<el-input-number v-model="form.aaaa" :min="0" :precision="2" v-thousands>
</el-input-number>

directives: {
  thousands: {
    // 被绑定元素插入父节点时调用
    inserted: function (el) {
      // 获取input节点
      if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
        el = el.getElementsByTagName('input')[0]
      }
      // 千分位
      el.value = parseFloat(el.value).toLocaleString('zh', {
      	minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
      // 聚焦转化为数字格式（去除千分位）
      el.onfocus = e => {
        let a = el.value.replace(/,/g, '') //去除千分号的','
        el.value = parseFloat(a).toFixed(2)
      }
      el.onblur = e => {
        el.value = parseFloat(el.value).toLocaleString('zh', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        })
      }
    }
  }
}

以上的例子可以实现把el-input-number绑定的初始值转化成千分号，也可以在失焦时转化千分号；
但是如果是通过调用接口获取数据，再赋值给el-input-number绑定的值，就不能实现页面刚加载就展示千分号；原因是因为inserted只在插入父节点时调用，只会执行一次，也就是在初始化页面的时候会调用一次，当数据更新后不会再调用，因此不能实现在数据更新后，转化为千分号；

改变思路：使用update代替inserted，update是组件VNode更新时调用，当数据发生变化的时候，VNode必然会更新；

directives: {
  thousands: {
    // 虚拟dom更新时调用
    update: function (el) {
    console.log("执行了吗")  // 执行两次
      // 获取input节点
      if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
        el = el.getElementsByTagName('input')[0]
      }
      // 千分位
      el.value = parseFloat(el.value).toLocaleString('zh', {
      	minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
      // 聚焦转化为数字格式（去除千分位）
      el.onfocus = e => {
        let a = el.value.replace(/,/g, '') //去除千分号的','
        el.value = parseFloat(a).toFixed(2)
      }
      el.onblur = e => {
        el.value = parseFloat(el.value).toLocaleString('zh', {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        })
      }
    }
  }
}

以上的例子实现了在虚拟dom更新时也会执行，但是还是不能实现接口数据返回后执行，因为ajax请求是属于异步操作，update钩子函数中拿不到数据更新后的值，思路是使用setTimeout转化成异步，就可以拿到了

let timer = setTimeout(() => {
  console.log("最新的值",el.value)
  // 千分位
  el.value = parseFloat(el.value).toLocaleString('zh', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
  clearTimeout(timer)
}, 0)

完整代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .el-input-number {
    width: 200px;
  }

  .el-input-number>.el-input-number__decrease {
    display: none;
  }

  .el-input-number>.el-input-number__increase {
    display: none;
  }

  .el-input__inner {
    padding-left: 10px !important;
    padding-right: 0px !important;
    text-align: left !important;
  }

  #app {
    margin: 300px auto;
  }

  #app>div {
    text-align: center;
  }

  #app>div:nth-child(1) {
    margin-bottom: 10px;
  }

  /* [v-clock] {
    display: none;
  } */
</style>

<body>
  <div id="app">
    <div>
      <el-button type="primary" @click="getShow">{{!show?'显示':'隐藏'}}</el-button>
    </div>
    <div>
      <el-input-number v-model="form.aaaa" :min="0" :precision="2" v-thousands v-if="show">
      </el-input-number>
      <el-input-number v-model="form.bbbb" :min="0" :precision="2" v-thousands v-if="show" disabled>
      </el-input-number>
    </div>
  </div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>javascript">
  new Vue({
    el: '#app',
    data: function () {
      return {
        form: {
          aaaa: null,
          bbbb: null
        },
        show: false,
        timer: null
      }
    },
    methods: {
      // 显示input
      getShow() {
        this.show = !this.show
        if (this.show) {
          this.getData()
        } else {
          this.clearData()
        }
      },
      // 模拟调用接口
      getData() {
        setTimeout(() => {
          this.form.aaaa = 2300.05
          this.form.bbbb = 18540022.89
        }, 500)
      },
      // 清空数据
      clearData() {
        this.form.aaaa = null
        this.form.bbbb = null
      }
    },
    directives: {
      thousands: {
        // 被绑定元素插入父节点时调用
        update: function (el, binding, vnode, oldVnode) {
          // 获取input节点
          if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
            el = el.getElementsByTagName('input')[0]
          }
          // 转化成异步，否则无法拿到更新后的el.value的值
          let timer = setTimeout(() => {
            let a = el.value.replace(/,/g, '') //去除千分号的','
            el.value = parseFloat(a).toFixed(2)
            el.value = parseFloat(el.value).toLocaleString('zh', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2
            })
            clearTimeout(timer)
          }, 0)
          // 聚焦转化为数字格式（去除千分位）
          el.onfocus = e => {
            let a = el.value.replace(/,/g, '') //去除千分号的','
            el.value = parseFloat(a).toFixed(2)
          }
          el.onblur = e => {
            el.value = parseFloat(el.value).toLocaleString('zh', {
              minimumFractionDigits: 2,
              maximumFractionDigits: 2
            })
          }
        }
      }
    }
  })
</script>

</html>