vue指令 只能输入正整数保留两位小数 （视图数据都更新）

vue指令 只能输入正整数保留两位小数

Vue.directive('onlyNum', {
    
    
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    
    
    let ele:any = el.tagName === 'INPUT' ? el : el.querySelector('input')
    ele.addEventListener("input", function () {
    
    
      //进行验证
      onlyNum(el);
    });
    function onlyNum(el: any) {
    
    
      let val = el.value;
      val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
      val = val.replace(/^\./g, ""); //验证第一个字符是数字
      val = val.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两位个小数
      if (val != el.value) {
    
    // 跳出循环
        el.value = val;
        el.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新
      }
    }
  }
})