Vue 全局指令限制输入框输入

Vue.directive('floatInput', {
    bind(el) {
        let ele = el.tagName === 'INPUT' ? el : el.querySelector('input');

        ele.addEventListener('input', () => {
            let temp = ele.value;

            if (!/^[1-9]\d*([.]?\d*)?$/.test(temp)) {
                temp = temp.replace(/(.){1}$/, '');
            }

            temp = temp.replace(/[.](\d{2})\d*/g, '.$1');
            ele.value = temp;

        }, true)
    }
});

只能输入正整数或最多两位小数，遇到问题是输入框里显示的是两位小数但 v-model 得到的是三位小数
猜测：使用 addEventListener 添加的同名事件类型监听是不会进行覆盖，而 v-model 监听的也是 input，先触发 v-model 的 input 使其得到值，再触发我们自己的 input 使得页面输入框的值得到限制
将 addEventListener 的第三个参数设为 true，事件捕获时触发，问题得到解决，具体细节还要多了解下事件捕获和冒泡

原文：https://www.cnblogs.com/Grani/p/12408332.html