問題描述

當(dāng)我們開發(fā)項(xiàng)目時(shí)，常常想限制用戶只能輸入純數(shù)字:

官方文檔

https://element.eleme.cn/#/zh-CN/component/input

https://element.eleme.cn/#/zh-CN/component/input-number?

解決方案

方法一：el-input + 正則表達(dá)式

只需要在el-input標(biāo)簽添加代碼,如下圖所示:

代碼如下圖

<el-form-item label="角色I(xiàn)d*" class="redItem"><el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" size="small" width="50" v-model="editRoleParam.roleID" placeholder="請(qǐng)輸入數(shù)字"></el-form-item>

可以通過給input 添加onkeyup事件來實(shí)現(xiàn)

當(dāng)輸入值的鍵盤抬起時(shí)觸發(fā)這個(gè)事件。this.value表示此輸入框的值，/\D/g為正則表達(dá)式，用來匹配所有非數(shù)字字符；

此句功能為：將輸入值為非數(shù)字的字符替換為空；

placeholder屬性是當(dāng)input框?yàn)榭諘r(shí)顯示的文字提示;

方法二：el-input-number

<el-input-numbersize="mini"style="width: 130px"v-model="user.coin":controls="false"placeholder="請(qǐng)輸入硬幣數(shù)量"></el-input-number>

僅允許輸入標(biāo)準(zhǔn)的數(shù)字值，可定義范圍?

注：不能帶 icon?

參考文章

https://www.jianshu.com/p/37ff53584c41

https://juejin.im/post/5ce77ebcf265da1b9612de0a

總結(jié)

以上是生活随笔為你收集整理的Element UI——数字输入框解决方案的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。