vue自定义指令解决输入数字问题

在项目中，经常会遇到input输入限制数字的需求，而type="number"属性用起来并不理想，存在部分问题，并且不大喜欢右侧三角。所以常用的做法是监听input事件再加上正则过滤，但这会有个回退现象，后来在用vue的自定义指令时可以直接获取dom，消除了回退。
代码如下：

directives: {
        onlyNum (el,binding,vnode) {
            let ele = el.tagName === 'INPUT' ? el : el.querySelector('input')
            ele.oninput = function() {
                console.log(ele.value)
                let val = ele.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\d).*$/,'$1$2.$3'); //只能输入三个小数
                ele.value = val;
            }
        }
    },

使用时只要在标签上加上v-only-num属性即可。