通過@keyup.native的時間動態監控輸入的類型

1.手機號碼,只能是數字,如果輸入了非數字直接清空

2.身份證號碼,除了Xx和數字其余的一律清空

3.基于1.2兩種情況下,還有一種是動態創建的字段(也就是v-for出來的),解決方法:先使用split形成字段數組,使用for循環找到最后一個點的前面的字段,方便使用$set更新和渲染頁面

setDelMsicStr(field,type){ let props let len let value let newphoestr let item = this if (field) { props = field.split(’.’) len = props.length for (let i = 0; i < len - 1; i++) { item = item[props[i]] } if(type=='phone'){ newphoestr = (item[props[len - 1]]).replace(/([^0-9])+/g, ’’) }else if(type==’idCard’){ newphoestr = (item[props[len - 1]]).replace(/([^0-9Xx])+/g, ’’) } this.$set(item, props[len - 1], newphoestr) } },

重點:也是使用this.$set()時必須的點

for (let i = 0; i < len - 1; i++) { item = item[props[i]] }

表格限制輸入的數字長度,超過限定值,直接顯示9999

<el-form-item prop='activStoreSellPrice'> <el-input type='number' @keyup.native='setRange(’form.prdctStoreList.’+scope.$index+’.activStoreSellPrice’,99999,0)' v-model.number='scope.row.activStoreSellPrice' :disabled='disabled' min='0' max='99999999'></el-input> </el-form-item>

重點：

表格的需要獲取到行的index(scope.$index)

@keyup.native='setRange(’form.prdctStoreList.’+scope.$index+’.activStoreSellPrice’,99999,0)'

補充知識：elementUI + vue 輸入框只能輸入正整數 不能輸入字母 e 以及+ - 號

看代碼吧~

<el-input :inline='true' v-model='dialogForm.closeTime' onKeypress='return(/[d]/.test(String.fromCharCode(event.keyCode)))' type='number'></el-input>

以上這篇vue:el-input輸入時限制輸入的類型操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。