Vue 多个自定义指令时冲突

[lengziyu]

例如全局设置了这么一条自定义指令，限制输入框只能输入小数点两位的数字。

Vue.directive('numberAmount', {
    bind: function(el) {
        el.handler = function() {
        el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
    }
    el.addEventListener('input', el.handler)
    },
})

当页面有两个输入框使用这个指令时。

<input v-numberAmount v-model="input1" type="text">
<input v-numberAmount v-model="input2" type="text">

发小数点删除或新增会影响另一个输入框的值。

解决方法

v-model改用:value，再加个输入事件@input,延迟一下修改值。

# template
<input v-numberAmount :value="input1" @input="inputVal($event)" type="text">

# js
methods: {
  inputVal($event){
    setTimeout(()=>{
        this.input = $event.target.value;
    }, 5)
  }
}

[xiaohaiH]

可以用捕获事件来解决 https://codepen.io/xiaohai/pen/bGRLzpQ

Vue.directive('numberAmount', {
    bind: function(el) {
        el.handler = function() {
            el.value = (el.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null;
        }
        el.addEventListener('input', el.handler, true);
    },
});