基于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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
Jan 04 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
DOM 事件的深入浅出(一)
Dec 05 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
js实现鼠标拖曳效果
Dec 30 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
PHP脚本数据库功能详解(下)
2006/10/09 PHP
php 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
jQuery技巧总结
2011/01/01 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python通过future处理并发问题
2017/10/17 Python
python删除不需要的python文件方法
2018/04/24 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
好的自荐信的要求
2013/10/30 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
导游词之湖北武当山
2019/09/23 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
python实现简易名片管理系统
2021/04/11 Python
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis