Elementui如何限制el-input框輸入小數點
更新時間:2022年08月02日 16:02:46 作者:前端開發(fā)工程師在杭州
這篇文章主要介紹了Elementui如何限制el-input框輸入小數點,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
限制el-input框輸入小數點
<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input> /** * oninput 限制輸入框小數點位數,多出的過濾掉 * @param Number {num} * @param Number {limit} */ oninput(num, limit) { var str = num var len1 = str.substr(0, 1) var len2 = str.substr(1, 1) //如果第一位是0,第二位不是點,就用數字把點替換掉 if (str.length > 1 && len1 == 0 && len2 != ".") { str = str.substr(1, 1) } //第一位不能是. if (len1 == ".") { str = "" } //限制只能輸入一個小數點 if (str.indexOf(".") != -1) { var str_ = str.substr(str.indexOf(".") + 1) if (str_.indexOf(".") != -1) { str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1) } } //正則替換 str = str.replace(/[^\d^\.]+/g, '') // 保留數字和小數點 if (limit / 1 === 1) { str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/,'$1') // 小數點后只能輸 1 位 } else { str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1') // 小數點后只能輸 2 位 } return str }
el-input 僅限保留兩位小數問題
廢話不多說:
<el-form-item label="概率值(100%)" rules="[{ required: true, message: '請?zhí)顚懜怕手?,僅限兩位小數'},{pattern:/^\d{1,2}(\.\d{1,2})?$/, message: '概率權重精確到兩位小數點,勿超過100'}]" prop="weight"> <el-input type="number" step="0.01" v-model.number="lotteryBonusCfg.weight" autocomplete="off"></el-input> </el-form-item>
關鍵是:正則:/^\d{1,2}(.\d{1,2})?$/
但是這個功能有個bug,就是無法輸入0.01,input會直接失去焦點,數字變成0.
解決辦法
v-model.number ==》 v-model=“lotteryBonusCfg.weight”
即可輸入0.01,或者1.01
以上僅為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
vue scroll滾動判斷的實現(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素)
這篇文章主要介紹了vue scroll滾動判斷的實現(是否滾動到底部、滾動方向、滾動節(jié)流、獲取滾動區(qū)域dom元素),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-06-06區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式,幫助大家更好的理解和學習vue路由,感興趣的朋友可以了解下2020-10-10Vue 解決在element中使用$notify在提示信息中換行問題
這篇文章主要介紹了Vue 解決在element中使用$notify在提示信息中換行問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue線上部署請求接口報錯net::ERR_CONNECTION_REFUSED
vue線上部署請求接口報錯net::ERR_CONNECTION_REFUSED問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06