Vue限制只能输入金额,小数位自定义长度

使用vue指令来做金额限制。指令跟组件一样需要注册才能使用，同样有两种方式，一种是局部注册：另一种是全局注册，这里使用全局注册。

先上效果图

//限制只能输入金额 value:小数位 列如:-111、123、123.12
Vue.directive("enterMoney", { // 自定义指令名字 v-enter-money="2" 
  bind: function (el, { value = 2 }) {
    el = el.nodeName == "INPUT" ? el : el.children[0];
    let RegStr =
      value == 0
        ? `^[\\-]?\\d*\\d{0,0}` //\\+
        : `^[\\-]?\\d*\\.?\\d{0,${value}}`;
    let RegZeroStr = /^[\-]?0+/; //处理0开头的问题
    el.addEventListener("keyup", function () {
      if (el.value.length > 1 && RegZeroStr.test(el.value)) {
        el.value = el.value.substr(0, 1)
      }
      el.value = el.value.match(new RegExp(RegStr, "g"));
      el.dispatchEvent(new Event("input"));
    });
  }
});

在需要限制的地方添加指令

<template>
  <div class="money-input">
    <input v-enter-money="0" />
  </div>
</template>