久久精品国产亚洲αv忘忧草,亚洲国产精品无码久久一线,成人妇女免费播放久久久

為什么自定義Vue指令會(huì)在未使用的輸入框中生效？

vue自定義指令誤判：看似生效于未使用輸入框

在Vue.JS開(kāi)發(fā)中，自定義指令有時(shí)會(huì)產(chǎn)生意料之外的行為，例如，指令似乎作用于未顯式綁定的元素。本文將分析一個(gè)案例，其中自定義指令用于數(shù)字輸入校驗(yàn)，卻意外影響了未綁定指令的輸入框。

問(wèn)題描述

一個(gè)全局指令validatenumber旨在限制輸入框只能輸入數(shù)字：

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'));         };     } });

該指令應(yīng)用于第一個(gè)輸入框（校驗(yàn)等待時(shí)間）：

<el-form-item label="等待時(shí)間" 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>

然而，第二個(gè)輸入框（空間間隔）未應(yīng)用該指令：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

<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>

令人困惑的是，第二個(gè)輸入框也表現(xiàn)出數(shù)字校驗(yàn)行為，禁止輸入非數(shù)字字符。