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