vue实战系列---------from 表单封装之input实现数字框 的千分位和小数点输入。

核心思想

A.利用失去焦点事件on-focus替换千分位符号

this.formInfoData[name] = this.formInfoData[name].replace(/\,/g, '')

B.利用 验证绑定的事件处理数字

(处理数字 功能有待完善，因不支持负数， 精度不够，js toFixed方法   对于数字精度处理有问题)  

呵呵呵哒  主要是思想和应用 ，具体数字处理网上有很多实例。这里不做赘述。

//验证处理对象的绑定
rules: {
        contractName: [{ validator: this.contractNameValid, trigger: 'blur' }],
        endDate: [{ validator: this.endDateValid, type: 'date', trigger: 'change' }],
        money: [ // 合同金额需要特殊处理
          { validator: this.moneyValidChange, trigger: 'change' },
          { validator: this.moneyValidBlur, trigger: 'blur' }
        ]
      },
// 验证的处理方法 

moneyValidChange (rule, val, cb) {
      val = val.replace(/\,/g, '').replace('-', '')
      if (this._isEmpty(val)) {
        cb(new Error('请填写合同金额'))
      } else if (this.isNumberInt(val)) {
        cb(new Error('请输入正确数字'))
      }
      cb()
    },
    moneyValidBlur (rule, val, cb) {
      val = val.replace(/\,/g, '').replace('-', '')
      if (this._isEmpty(val)) {
        cb(new Error('请填写合同金额'))
      } else if (this.isNumberInt(val)) {
        cb(new Error('请输入正确数字'))
      } else {
        this.signInfoData[rule.field] = parseFloat(val).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')
      }
      cb()
    },

//数字判断  具体什么要求，可以根据自己的业务自行拓展。  
isNumberInt (val) {
      let regPos = /^\d+(\.\d+)?$/ // 非负浮点数
      if (regPos.test(val)) {
        return false
      } else {
        return true
      }
    }

实战核心代码

A 如下 focus事件的绑定，

事件处理代码因为封装通用， 所以用emit 抛出去。

 inputFocus (name) {
      this.$emit('inputFocus', name)
    }

实战代码如下。 

---

 

实例应用

---

form.vue  表单。

 Cusform.vue    在另一篇实战也有一个类似，那个更高级。

配置文件   number2的配置。

   {
      type: 'number2',
      label: '合同金额：',
      model: 'money',
      showItem: '1',
      max: 999999999999999999,
      min: 0,
      precision: 2,
      // rules: signRules.money,
      prop: 'money'
    },