vue:el-input輸入時(shí)限制輸入的類型操作
通過@keyup.native的時(shí)間動(dòng)態(tài)監(jiān)控輸入的類型
1.手機(jī)號(hào)碼,只能是數(shù)字,如果輸入了非數(shù)字直接清空
2.身份證號(hào)碼,除了Xx和數(shù)字其余的一律清空
3.基于1.2兩種情況下,還有一種是動(dòng)態(tài)創(chuàng)建的字段(也就是v-for出來的),解決方法:先使用split形成字段數(shù)組,使用for循環(huán)找到最后一個(gè)點(diǎn)的前面的字段,方便使用$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) } },
重點(diǎn):也是使用this.$set()時(shí)必須的點(diǎn)
for (let i = 0; i < len - 1; i++) { item = item[props[i]] }
表格限制輸入的數(shù)字長度,超過限定值,直接顯示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>
重點(diǎn):
表格的需要獲取到行的index(scope.$index)
@keyup.native='setRange(’form.prdctStoreList.’+scope.$index+’.activStoreSellPrice’,99999,0)'
補(bǔ)充知識(shí):elementUI + vue 輸入框只能輸入正整數(shù) 不能輸入字母 e 以及+ - 號(hào)
看代碼吧~
<el-input :inline='true' v-model='dialogForm.closeTime' onKeypress='return(/[d]/.test(String.fromCharCode(event.keyCode)))' type='number'></el-input>
以上這篇vue:el-input輸入時(shí)限制輸入的類型操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. CSS百分比padding制作圖片自適應(yīng)布局2. HTML5實(shí)戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)3. CSS清除浮動(dòng)方法匯總4. React優(yōu)雅的封裝SvgIcon組件示例5. 不要在HTML中濫用div6. HTTP協(xié)議常用的請求頭和響應(yīng)頭響應(yīng)詳解說明(學(xué)習(xí))7. TypeScript實(shí)現(xiàn)十大排序算法之歸并排序示例詳解8. Electron調(diào)用外接攝像頭并拍照上傳實(shí)現(xiàn)詳解9. HTML5 Canvas繪制圖形從入門到精通10. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)
