基于element-ui封裝表單金額輸入框的方法示例
在日常的迭代開發(fā)中通常我們會遇到這樣的場景：在一個表單中需要用戶輸入金額，并校驗金額的格式。這個需求你一定遇到過，但是現(xiàn)在，我們還需要做到：當用戶離開輸入框（失去焦點）時，輸入的內容變成了用逗號每隔 3 位分隔的數字，并展示給用戶。且最后提交金額時，參數的值仍然是正常數字，不包含逗號。
遇到這種需求，我們首先要想到「表單中的金額輸入框」是常見到的功能。既然是常見的功能，我們要將它抽象封裝起來，做到隨時可用于任何表單中，用一行代碼代替重復作業(yè)。
像表單項一樣，我們需要給組件傳遞 label，綁定值的 key，placeholder 用于展示在表單中；還需要傳遞整個 form 對象，表單的 rules 進來。另外，考慮到需要給一個遮罩層展示格式化后的金額，我們還需要傳遞 width 決定遮罩層寬度。
注意我們上面的需求，當 input 框觸發(fā) blur 事件時，我們首先需要校驗用戶輸入的內容是否為正數且可保留兩位小數。這時就用到了傳遞進來的 rules，拿它來校驗。若通過校驗則展開格式化后的金額，不通過就觸發(fā) element-ui 本身的校驗規(guī)則提示。注意看 @blur 觸發(fā)的 blurInput 方法，用于去掉輸入內容前面的 0，是否符合校驗條件，最后決定是否展開格式化后的金額。
如果沒問題，通過了校驗，就需要根據輸入內容格式化金額。利用 computed 計算得到。
組件的設計思想大致如下：
完整的組件代碼如下：
},
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 為正則表達式`
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>
在表單中的使用方法其實和你直接寫一個 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億 的正數，可保留兩位小數',
trigger: 'blur',
},
],
},
}
}
components: {
priceInput,
}
</script>
到此這篇關于基于element-ui封裝表單金額輸入框的方法示例的文章就介紹到這了,更多相關element-ui 表單金額輸入框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇淺談vuex中store的命名空間，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了element中el-select的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue-cli3配置favicon.ico和title的流程
這篇文章主要介紹了vue-cli3配置favicon.ico和title的流程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在Vue中，父子組件之間通過Prop和Event實現(xiàn)了數據的雙向綁定，但是，Vue設計者為什么不允許子組件修改父組件傳遞的Prop呢，本文就來帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了 Vue 中 title 的動態(tài)修改問題，文中通過兩種方案給大家介紹了title的傳遞問題 ,需要的朋友可以參考下2019-06-06
使用Vue和ECharts創(chuàng)建交互式圖表的代碼示例
在現(xiàn)代 Web 應用中,數據可視化是一個重要的組成部分,它不僅能夠幫助用戶更好地理解復雜的數據,還能提升用戶體驗,本文給大家使用Vue和ECharts創(chuàng)建交互式圖表的示例,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue點擊導航頁面實現(xiàn)自動滾動到特定位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue使用@scroll監(jiān)聽滾動事件時，@scroll無效問題的解決方法詳解
這篇文章主要介紹了vue使用@scroll監(jiān)聽滾動事件時，@scroll無效問題的解決方法,結合實例形式分析了@scroll監(jiān)聽滾動事件無效問題的原因及相應的解決方法,需要的朋友可以參考下2019-10-10