欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 自定义指令 input限制输入金额

程序员文章站 2022-06-07 13:52:54
...

html 部分

<el-input v-enter-money v-model="money"></el-input>

js 部分

import Vue from "vue";

Vue.directive("enterMoney", { // 自定义指令名字 v-enter-money
  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}}`;
    el.addEventListener("keyup", function() {
      el.value = el.value.match(new RegExp(RegStr, "g"));
      el.dispatchEvent(new Event("input"));
    });
  }
});
相关标签: vue js