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

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

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>

没有任何头绪


回答:

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

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

以上是 vue指令 在未使用的此指令的input框中起作用了是为什么? 的全部内容, 来源链接: utcz.com/p/935188.html

回到顶部