javascript - vue指令 在未使用的此指令的input框中起作用了是为什么？

Question

自定义全局指定校验输入框只能输入数字

Vue.directive('validateNumber', {    bind(el, binding, vnode) {        let lastData = null        el.onkeyup = (e) => {            if (String.fromCharCode(e.keyCode) == 'E' || String.fromCharCode(e.keyCode) == 'KeyE') {                e.target.value = lastData                return false            } else {                lastData = e.target.value            }            e.target.value = e.target.value.replace(/[^\d]/ig, '')                        let _this = vnode.context            _this.accessNestedObject(_this, vnode.data.model.expression, e.target.value)                        if (!!binding.expression && !!e.target.value) {                let obj = (new Function("return " + binding.expression))()                let keys = Object.keys(obj)                let values = Object.values(obj)                if (keys[0] == 'min') {                    if (e.target.value < values[0])                        e.target.value = values[0]                }                if (keys[1] == 'max') {                    if (e.target.value > values[1])                        e.target.value = values[1]                }            }            el.dispatchEvent(new Event('input'))        }    }})

给第一个输入框参加此验证，第二个输入框不带验证，但是第二个输入框自动进入此校验，不能输入除数字外的其他字符，这是为什么？

<el-form-item label="等待时间" prop="timeInterval">                <el-input                  type="number"                  v-model="alertRulesForm.timeInterval"                  id="alarm-rule-time-interval"                  style="width:100%"                  v-validateNumber                >                  <template slot="append">秒</template>                </el-input>              </el-form-item><el-form-item label="空间间隔" prop="distanceInterval">                <el-input                  type="number"                  v-model="alertRulesForm.distanceInterval"                  id="alarm-rule-distance-interval"                >                  <template slot="append">米</template>                </el-input>              </el-form-item>

没有任何头绪

Answer 1

第二个输入框自动进入此校验这个你是怎么判断的，在el.onkeyup中监听到事件被触发了吗。

不能输入除数字外的其他字符，这是为什么？你的el-input设置了type="number"这本身就限制了只能输入数字和小数点

Answer 2

这个问题可能是由于 Vue 的指令是全局注册的，因此你在一个元素上注册了一个自定义指令，它可能会影响到其它没有注册这个指令的元素。在你的例子中，你在一个输入框中注册了 v-validateNumber 指令，然后它似乎也影响到了其它的输入框。

这个问题可以通过在每个输入框中单独注册这个指令来解决，而不是全局注册。例如：

<el-form-item label="等待时间" prop="timeInterval">  <el-input    type="number"    v-model="alertRulesForm.timeInterval"    id="alarm-rule-time-interval"    style="width:100%"    v-validateNumber    v-slot:append="() => {/* 阻止默认行为 */}"  >    <template slot="append">秒</template>  </el-input></el-form-item><el-form-item label="空间间隔" prop="distanceInterval">  <el-input    type="number"    v-model="alertRulesForm.distanceInterval"    id="alarm-rule-distance-interval"    v-slot:append="() => {/* 阻止默认行为 */}"  >    <template slot="append">米</template>  </el-input></el-form-item>

在上述代码中，我添加了 v-slot:append="() => {/* 阻止默认行为 */}"，这将阻止 append 插槽的默认行为，这样你的自定义指令就不会影响到其它的输入框了。

此外，你还需要确保你的自定义指令只绑定到期望的元素上，并且没有使用全局数据。在某些情况下，全局数据可能会导致指令的行为异常。