vue自定义指令误判：看似生效于未使用输入框
在Vue.JS开发中，自定义指令有时会产生意料之外的行为，例如，指令似乎作用于未显式绑定的元素。本文将分析一个案例，其中自定义指令用于数字输入校验，却意外影响了未绑定指令的输入框。
问题描述
一个全局指令validatenumber旨在限制输入框只能输入数字：
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[1]) { e.target.value = values[1]; } } } el.dispatchEvent(new Event('input')); }; } });
该指令应用于第一个输入框（校验等待时间）：
<el-form-item label="等待时间" prop="timeInterval"> <el-input id="alarm-rule-time-interval" style="width:100%" type="number" v-model="alertRulesForm.timeInterval" v-validateNumber> <template slot="append">秒</template> </el-input> </el-form-item>
然而，第二个输入框（空间间隔）未应用该指令：
立即学习“前端免费学习笔记（深入）”；
<el-form-item label="空间间隔" prop="distanceInterval"> <el-input id="alarm-rule-distance-interval" type="number" v-model="alertRulesForm.distanceInterval"> <template slot="append">米</template> </el-input> </el-form-item>
令人困惑的是，第二个输入框也表现出数字校验行为，禁止输入非数字字符。
问题分析
最初的假设是指令错误地绑定到了第二个输入框。然而，仔细检查代码后发现，第二个输入框的onkeyup事件并没有被validateNumber指令触发。
问题的根源在于el-input组件的type=”number”属性。此属性本身就限制了输入，只允许数字和小数点。因此，第二个输入框的限制并非来自自定义指令，而是type=”number”的内置行为。
这个案例强调了在调试Vue应用时，仔细区分组件自身属性和自定义指令行为的重要性。 看似指令生效于未绑定元素的情况，可能源于其他因素的影响，而非指令本身的错误。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
喜欢就支持一下吧
相关推荐
