Elementui如何限制el-input框輸入小數(shù)點
限制el-input框輸入小數(shù)點
<el-input v-model="value" @keyup.native="value = oninput(value,2)"></el-input>
/**
* oninput 限制輸入框小數(shù)點位數(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,第二位不是點,就用數(shù)字把點替換掉
if (str.length > 1 && len1 == 0 && len2 != ".") {
str = str.substr(1, 1)
}
//第一位不能是.
if (len1 == ".") {
str = ""
}
//限制只能輸入一個小數(shù)點
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ù)點
if (limit / 1 === 1) {
str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/,'$1') // 小數(shù)點后只能輸 1 位
} else {
str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1') // 小數(shù)點后只能輸 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ù)點,勿超過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會直接失去焦點,數(shù)字變成0.
解決辦法
v-model.number ==》 v-model=“lotteryBonusCfg.weight”
即可輸入0.01,或者1.01
以上僅為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue通過axios發(fā)送ajax請求基礎(chǔ)演示
這篇文章主要介紹了Vue通過axios發(fā)送ajax請求基礎(chǔ)演示,包括了axios發(fā)送簡單get請求,axios get傳參,axios發(fā)送post請求等基礎(chǔ)代碼演示需要的朋友可以參考下2023-02-02
分析 Vue 中的 computed 和 watch 的區(qū)別
這篇文章分析 Vue 的 computed 和 watch 的區(qū)別,computed 用來監(jiān)控自己定義的變量,頁面上可直接使用。watch 是監(jiān)測 Vue 實例上的數(shù)據(jù)變動,通俗地講,就是檢測 data 內(nèi)聲明的數(shù)據(jù),需要的朋友可以參考一下2021-09-09
Vue中控制v-for循環(huán)次數(shù)的實現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題
這篇文章主要介紹了解決VUE自定義拖拽指令時 onmouseup 與 click事件沖突問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07

