久久久久无码精品国产不卡,久久99热只有频精品8,久久久久人妻精品一区三寸蜜桃

為什么第二個輸入框也會被限制只能輸入數字？

vue自定義指令導致輸入框限制輸入的問題

本文分析一個Vue自定義指令導致輸入框意外限制輸入的問題。該指令旨在限制輸入框只能輸入數字，但意外地影響了未應用該指令的輸入框。

問題描述

一個全局Vue指令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 (parseInt(e.target.value) < parseInt(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>

然而，第二個輸入框也只允許輸入數字。