vue项目中金额小写转换为汉字大写的功能封装

1. 先新建一个功能js文件为required.js

export default{
    /*
    * 封装公共金额转化大小写验证
    * @author   王天瑜
    * @date     2019-06-15
    * 
    */

   proof:function check(n){
        if(n ==''){
            return'输入不能为空'
        }else if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
            return "只能输入阿拉伯数字";  
        }
     
    },
      /*
    * 封装公共金额转化大小写文件
    * @author   王天瑜
    * @date     2019-06-14
    * 
    */
    required:function money(n){
        if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
            return ''
        }
            
        var unit="仟佰拾亿仟佰拾万仟佰拾圆角分",str="";
              n += "00";
        var p= n.indexOf('.');
        if(p >=0)
            n=n.substring(0,p)+n.substr(p+1,2);

            unit=unit.substr(unit.length-n.length);

            for(var i=0; i<n.length; i++)
            str +='零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i))+unit.charAt(i);
            return str.replace(/零(仟|佰|拾|角)/g,"零").replace(/(零)+/g,"零").replace(/零(万|亿|圆)/g,"$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^圆零?|零分/g,"").replace(/圆$/g,"圆整");
    }
}

---

2. main.js全局引入这个文件，并在vue的原型上扩展这个功能方法

// 引入金额转换文件
import required from"@/assets/js/required.js"
Vue.prototype.$required = required;

---

3. 在vue组件中使用这个方法

//当input注册的  forWard事件被触发时，我们调用封装的验证金额方法（传参数）
/* 参数说明：
    this.transFrom.transactionPrice 为input的绑定值
    this.Capitalization为验证文本
    isNullInput 为验证文本的开关
 */
 methods: {
    /*
    * 该房屋的实际价格和大写金额验证
    * @author   王天瑜
    * @date     2019-06-15
    */
    forWard(val) {
      //值验证
    this.Capitalization = this.$required.proof(this.transFrom.transactionPrice);
      // 值转换
    this.transFrom.transactionPrice=this.$required.required(this.transFrom.transactionPrice);
     // 值样式判断
    if(this.Capitalization =='只能输入阿拉伯数字' || this.Capitalization =='输入不能为空'){
     this.isNullInput = true;
    }else{
        this.isNullInput=false;
    }
   }

vue组件部分：

<template>
<!-- 该房屋的实际成交价格为人民币（大写） -->
    <div class="transaction">
      <el-form  
              hide-required-asterisk 
               v-if="hasData"
               :model="transFrom">
        <el-form-item label="该房屋的实际成交价格为人民币（大写）" >
           <div class="price">
              <el-input 
               placeholder="请输入交易价格"
                class="deal" 
                :class="{'error-input':isNullInput}"
                clearable
                data-code = contractCode.HOUSING_TRANSACTION_PRICE
                data-content='transactionPrice'
                v-model="transFrom.transactionPrice" 
                @blur="forWard">
              </el-input>
              <div class="capitalizations" >{{Capitalization}}</div>
          </div>
       </el-form-item>
    </el-form>
  </div>
</template>

在data中需要对值定义

data(){
        return {
            // 实际成交价格
            transFrom:{
                // 实际价格
                transactionPrice:''
            },
            // 大写金额验证
            Capitalization:'',
            isNullInput:false,
      }
}

验证样式：

 //在全局的样式文件（我用的是.scss）中写的如下：
 //金额大写验证：
  .price{
    display: inline-block;
    width: 200px;
    
    // 文本框
    .el-input__inner {
      height: 30px;
    //   line-height: 30px;
      width:200px;
    }
    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 200px;
    }
    .error-input .el-input__inner {
     border:1px solid red;
    }
      // 错误验证
    .capitalizations {
      position: absolute;
      color: red; 
      width:200px;
      height: 20px;
      line-height:20px;
      font-size: 12px !important;
    }

  }

4. 关于验证样式：

关于验证和验证样式，模仿的是element-ui的表单验证样式，你可能问了为什么不使用element-ui中自带的验证规则（或自定义验证）的验证样式呢，其实我也考虑过，但是结合（不包括验证函数）封装的代码，没有实现，只能自己手写一个模拟实现了。。。
还是点小遗憾的毕竟代码量增加了/(ㄒoㄒ)/~~
大家凑活看和借鉴吧，有结合element-ui验证规则实现的记得@我哦~

---

封装的逻辑结合了网上的有的部分代码，自己实现的，创作不易，转载请注明链接哦~