vue自訂指令限制輸入內容

前幾天接到需求需要我限制欄位的輸入，而且還要有清空內容，閃現等特殊效果，首先就放棄了validate這方式，只好自己下去寫個自訂指令，紀錄一下

只能輸入數字，英文，還有底線，之後就可以在input上下v-policy指令，搭配裝飾子，就可以有不同效果啦

Vue.directive("policy", {

      bind(el, args, vnode) {

        let handler = (e) => {

          if (/[^0-9a-zA-Z\-_]/.test(e.target.value)) {

            e.target.value = args.modifiers.clear

              ? ""

              : e.target.value.replace(/[^0-9a-zA-Z\-_]/, "");

            const emitInput = () =>

              vnode.elm.dispatchEvent(new CustomEvent("input"));

            if (args.modifiers.lazy) {

              setTimeout(emitInput, 50);

            } else {

              emitInput();

            }

          }

        };

        el.addEventListener("input", handler);

      }

    });

這是只能輸入數字

Vue.directive("number", {

      bind(el, args, vnode) {

        let handler = (e) => {

          let regex;

          if (args.modifiers.int) {

            regex = /([0-9]+).*/;

          } else {

            regex = /([0-9]+\.?[0-9]*).*/;

          }

          let replaceValue = e.target.value.replace(regex, "$1");

          if (!isNumeric(replaceValue)) {

            replaceValue = "";

          }

          if (e.target.value != replaceValue) {

            e.target.value = args.modifiers.clear ? "" : replaceValue;

            const emitInput = () =>

              vnode.elm.dispatchEvent(new CustomEvent("input"));

            if (args.modifiers.lazy) {

              setTimeout(emitInput, 50);

            } else {

              emitInput();

            }

          }

        };

        el.addEventListener("input", handler);

      }

    });

雖然需求順利達成，但還是要小小抱怨一下，為什麼做這麼多違反自然定律的事情= =，UX老實說也沒有比較好，又會增加許多工程師的困擾，唉~