Elementui如何限制el-input框輸入小數(shù)點(diǎn)
更新時(shí)間：2022年08月02日 16:02:46 作者：前端開發(fā)工程師在杭州
這篇文章主要介紹了Elementui如何限制el-input框輸入小數(shù)點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
限制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 = ""
}
//限制只能輸入一個(gè)小數(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: '請(qǐng)?zhí)顚懜怕手担瑑H限兩位小數(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})?$/
但是這個(gè)功能有個(gè)bug，就是無(wú)法輸入0.01，input會(huì)直接失去焦點(diǎn)，數(shù)字變成0.
解決辦法
v-model.number ==》 v-model=“lotteryBonusCfg.weight”
即可輸入0.01，或者1.01
以上僅為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue.use到底是什么鬼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
在vue中使用vue-echarts-v3的實(shí)例代碼
這篇文章主要介紹了在vue中使用vue-echarts-v3的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
本文主要介紹了vue使用npm發(fā)布自己的公網(wǎng)包,通過創(chuàng)建一個(gè)簡(jiǎn)單的npm包,本文詳細(xì)闡述了從創(chuàng)建到發(fā)布的整個(gè)過程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)翻牌動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue通過axios發(fā)送ajax請(qǐng)求基礎(chǔ)演示
這篇文章主要介紹了Vue通過axios發(fā)送ajax請(qǐng)求基礎(chǔ)演示,包括了axios發(fā)送簡(jiǎn)單get請(qǐng)求，axios get傳參，axios發(fā)送post請(qǐng)求等基礎(chǔ)代碼演示需要的朋友可以參考下2023-02-02
分析 Vue 中的 computed 和 watch 的區(qū)別
這篇文章分析 Vue 的 computed 和 watch 的區(qū)別，computed 用來監(jiān)控自己定義的變量，頁(yè)面上可直接使用。watch 是監(jiān)測(cè) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)，通俗地講，就是檢測(cè) data 內(nèi)聲明的數(shù)據(jù),需要的朋友可以參考一下2021-09-09
這篇文章主要介紹了怎樣在vue項(xiàng)目下添加ESLint的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Vue中控制v-for循環(huán)次數(shù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問題
這篇文章主要介紹了解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07