<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í)顚懜怕手?，僅限兩位小數(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，就是無法輸入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)文章

Vue3源碼分析組件掛載初始化props與slots
這篇文章主要為大家介紹了Vue3源碼分析組件掛載初始化props與slots實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
vue scroll滾動(dòng)判斷的實(shí)現(xiàn)(是否滾動(dòng)到底部、滾動(dòng)方向、滾動(dòng)節(jié)流、獲取滾動(dòng)區(qū)域dom元素)
這篇文章主要介紹了vue scroll滾動(dòng)判斷的實(shí)現(xiàn)(是否滾動(dòng)到底部、滾動(dòng)方向、滾動(dòng)節(jié)流、獲取滾動(dòng)區(qū)域dom元素)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
區(qū)分vue-router的hash和history模式
這篇文章主要介紹了區(qū)分vue-router的hash和history模式，幫助大家更好的理解和學(xué)習(xí)vue路由，感興趣的朋友可以了解下
2020-10-10
Vue 解決在element中使用$notify在提示信息中換行問題
這篇文章主要介紹了Vue 解決在element中使用$notify在提示信息中換行問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue線上部署請(qǐng)求接口報(bào)錯(cuò)net::ERR_CONNECTION_REFUSED
vue線上部署請(qǐng)求接口報(bào)錯(cuò)net::ERR_CONNECTION_REFUSED問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
圖解Vue?響應(yīng)式流程及原理
這篇文章主要為大家介紹了圖解Vue的響應(yīng)式原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
優(yōu)雅地使用loading(推薦)
這篇文章主要介紹了在Vue和React中如何優(yōu)雅地使用loading，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
淺談Vue SPA 首屏加載優(yōu)化實(shí)踐
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實(shí)踐，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟
這篇文章主要給大家介紹了關(guān)于vue-cli基礎(chǔ)配置及webpack配置修改的完整步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
vue項(xiàng)目適配屏幕分辨率與屏幕的縮放適配詳細(xì)教程
現(xiàn)在很多14寸的筆記本，出廠默認(rèn)就是150%的顯示。導(dǎo)致很多時(shí)候我們的項(xiàng)目，自己開發(fā)的時(shí)候都是按照100%比例來開發(fā)的，上線了就會(huì)發(fā)現(xiàn)這個(gè)問題，今天就這個(gè)問題給出解決方案，感興趣的朋友跟隨小編一起看看吧
2022-11-11