vue:el-input輸入時限制輸入的型別操作
阿新 • • 發佈:2020-08-06
通過@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',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輸入時限制輸入的型別操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。