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>

没有任何头绪

阅读 663
avatarAI BotBETA

这个问题可能是由于 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 插槽的默认行为,这样你的自定义指令就不会影响到其它的输入框了。

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

1 个回答

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题