vue自定义指令限制input只能输入数字和小数点

1. 先注册一个自定义指令

import Vue from ‘vue’;

Vue.directive(‘LimitInputNumber’, {
bind(el) {
do something
},
});
2.使用自定义指令

<el-input v-limit-input-number />

3.指令内部校验
onkeypress 事件会在键盘按键被按下并释放一个键时发生
可在事件触发时检测若输入的值不为数字，直接返回 fales

Vue.directive('LimitInputNumber', {
 bind(el) {
 el.onkeypress = (event) => {
  return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8;
 };
 },
});

tip:但该事件存在一个问题，就是在中文输入法的时候无法触发事件，导致用户可以输入中文

3.oninput 事件
oninput 事件在用户输入时触发
可在事件触发时进行过滤，过滤掉那些不为数字的值，并重新绑定到输入框上，解决了中文输入法下的问题

Vue.directive('LimitInputNumber', {
 bind(el) {
  el.oninput = () => {
    el.children[0].value = el.children[0].value.replace(/[^\d.]/g, "");
  };
 },
});