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