基于element-ui封装表单金额输入框的方法示例


Posted in Javascript onJanuary 06, 2021

在日常的迭代开发中通常我们会遇到这样的场景:在一个表单中需要用户输入金额,并校验金额的格式。这个需求你一定遇到过,但是现在,我们还需要做到:当用户离开输入框(失去焦点)时,输入的内容变成了用逗号每隔 3 位分隔的数字,并展示给用户。且最后提交金额时,参数的值仍然是正常数字,不包含逗号。

基于element-ui封装表单金额输入框的方法示例

遇到这种需求,我们首先要想到「表单中的金额输入框」是常见到的功能。既然是常见的功能,我们要将它抽象封装起来,做到随时可用于任何表单中,用一行代码代替重复作业。

基于element-ui封装表单金额输入框的方法示例

像表单项一样,我们需要给组件传递 label,绑定值的 keyplaceholder 用于展示在表单中;还需要传递整个 form 对象,表单的 rules 进来。另外,考虑到需要给一个遮罩层展示格式化后的金额,我们还需要传递 width 决定遮罩层宽度。

基于element-ui封装表单金额输入框的方法示例

注意我们上面的需求,当 input 框触发 blur 事件时,我们首先需要校验用户输入的内容是否为正数且可保留两位小数。这时就用到了传递进来的 rules,拿它来校验。若通过校验则展开格式化后的金额,不通过就触发 element-ui 本身的校验规则提示。注意看 @blur 触发的 blurInput 方法,用于去掉输入内容前面的 0,是否符合校验条件,最后决定是否展开格式化后的金额。

基于element-ui封装表单金额输入框的方法示例

如果没问题,通过了校验,就需要根据输入内容格式化金额。利用 computed 计算得到。

组件的设计思想大致如下:

基于element-ui封装表单金额输入框的方法示例

完整的组件代码如下:

},
  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 表单金额输入框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
微信小程序实现图片放大预览功能
Oct 22 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
windows实现npm和cnpm安装步骤
Oct 24 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
JS中多层次排序算法的实现代码
Jan 06 #Javascript
如何使用原生Js实现随机点名详解
Jan 06 #Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 #Javascript
JavaScript 中的六种循环方法
Jan 06 #Javascript
JavaScript的一些小技巧分享
Jan 06 #Javascript
详解Vue2的diff算法
Jan 06 #Vue.js
如何利用JavaScript编写一个格斗小游戏
Jan 06 #Javascript
You might like
图书管理程序(一)
2006/10/09 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JavaScript插入动态样式实现代码
2012/02/22 Javascript
window resize和scroll事件的基本优化思路
2014/04/29 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
跟老齐学Python之网站的结构
2014/10/24 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python3.6实现学生信息管理系统
2019/02/21 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
python实现打砖块游戏
2020/02/25 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
大学生演讲稿范文
2014/01/11 职场文书
社区八一活动方案
2014/02/03 职场文书
大学生求职信范文
2014/05/24 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技