快捷導(dǎo)航

基于element-ui封裝表單金額輸入框的方法示例

更新時(shí)間：2021年01月06日 17:25:48 作者：Huup_We

這篇文章主要介紹了基于element-ui封裝表單金額輸入框的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在日常的迭代開發(fā)中通常我們會遇到這樣的場景：在一個(gè)表單中需要用戶輸入金額，并校驗(yàn)金額的格式。這個(gè)需求你一定遇到過，但是現(xiàn)在，我們還需要做到：當(dāng)用戶離開輸入框（失去焦點(diǎn)）時(shí)，輸入的內(nèi)容變成了用逗號每隔 3 位分隔的數(shù)字，并展示給用戶。且最后提交金額時(shí)，參數(shù)的值仍然是正常數(shù)字，不包含逗號。

遇到這種需求，我們首先要想到「表單中的金額輸入框」是常見到的功能。既然是常見的功能，我們要將它抽象封裝起來，做到隨時(shí)可用于任何表單中，用一行代碼代替重復(fù)作業(yè)。

像表單項(xiàng)一樣，我們需要給組件傳遞 label，綁定值的 key，placeholder 用于展示在表單中；還需要傳遞整個(gè) form 對象，表單的 rules 進(jìn)來。另外，考慮到需要給一個(gè)遮罩層展示格式化后的金額，我們還需要傳遞 width 決定遮罩層寬度。

注意我們上面的需求，當(dāng) input 框觸發(fā) blur 事件時(shí)，我們首先需要校驗(yàn)用戶輸入的內(nèi)容是否為正數(shù)且可保留兩位小數(shù)。這時(shí)就用到了傳遞進(jìn)來的 rules，拿它來校驗(yàn)。若通過校驗(yàn)則展開格式化后的金額，不通過就觸發(fā) element-ui 本身的校驗(yàn)規(guī)則提示。注意看 @blur 觸發(fā)的 blurInput 方法，用于去掉輸入內(nèi)容前面的 0，是否符合校驗(yàn)條件，最后決定是否展開格式化后的金額。

如果沒問題，通過了校驗(yàn)，就需要根據(jù)輸入內(nèi)容格式化金額。利用 computed 計(jì)算得到。

組件的設(shè)計(jì)思想大致如下：

完整的組件代碼如下：

  },
  rules: {
   type: Object,
   default: () => { },
  },
 },
 data () {
  return {
   showFormatPrice: false, // 是否顯示遮罩
  }
 },
 computed: {
  formaterPrice () {
   if (
    this.form.deceivedAmount !== '' &&
    this.form.deceivedAmount !== null
   ) {
    // 去掉前面的0
    const integer = this.form.deceivedAmount.split('.')[0]
    const decimal = this.form.deceivedAmount.split('.')[1]
     ? `.${this.form.deceivedAmount.split('.')[1]}`
     : ''
    return `${integer
     .toString()
     .replace(/(?=(?!^)(\d{3})+$)/g, ',')}${decimal}`
   } else {
    return ''
   }
  },
 },
 methods: {
  // 聚焦金額輸入框
  focusInput () {
   this.showFormatPrice = false
   this.$refs.input.focus()
  },
  // 失焦金額輸入框
  blurInput () {
   if (this.form.deceivedAmount !== '') {
    // 去掉前面的0
    const integer = Number(this.form.deceivedAmount.split('.')[0])
    const decimal = this.form.deceivedAmount.split('.')[1]
     ? `.${this.form.deceivedAmount.split('.')[1]}`
     : ''
    this.form.deceivedAmount = isNaN(`${integer}${decimal}`)
     ? this.form.deceivedAmount
     : `${integer}${decimal}`
    if (typeof this.rules[this.prop][0].pattern !== 'object') {
     throw `請確保 rules[${this.prop}][0].pattern 為正則表達(dá)式`
     return
    }
    this.showFormatPrice = this.rules[this.prop][0].pattern.test(
     this.form.deceivedAmount,
    )
   }
  },
 },
}
</script>

<style lang="less" scoped>
.price-mask {
 position: absolute;
 z-index: 2;
 top: 1px;
 left: 125px;
 background: white;
 width: 110px;
 overflow: auto;
 font-size: 13px;
}
</style>

在表單中的使用方法其實(shí)和你直接寫一個(gè) el-form-item 的效果是一樣的，直接引入即可。

// 使用方法：
<template lang="pug">
el-form(:model="form" ref="form" label="180px" :label-suffix="'：'" :rules="rules")
  priceInput(:form.sync = "form" :width = "150" label = "金額" prop = "deceivedAmount" :rules = "rules")
</template>

<script>
import priceInput from '@self/components/priceInput'
data() {
 return {
  form: {
   deceivedAmount: null,
  },
  rules: {
   deceivedAmount: [
    {
     pattern: /^1000000000$|^1000000000.0$|^1000000000.00$|^[+]{0,1}(\d{0,9})$|^[+]{0,1}(\d{0,9}\.\d{1,2})$/,
     message: ' 請輸入 0-10億 的正數(shù)，可保留兩位小數(shù)',
     trigger: 'blur',
    },
   ],
  },
 }
}
components: {
 priceInput,
}
</script>

到此這篇關(guān)于基于element-ui封裝表單金額輸入框的方法示例的文章就介紹到這了,更多相關(guān)element-ui 表單金額輸入框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: