VUE + VUX 客户端 金额，输入数字同步翻译成大小汉字金额

is-required  这个组件的源码 https://blog.csdn.net/dyp330/article/details/85781622  

<template>
  <div>
    <!--金额，输入数字同步翻译成大小汉字金额-->
    <div class="mt-10">
      <span class="amountTitle">
     {{title}}
        <!---是否必填，显示红*-->
     <is-required :isRequired="isRequired"></is-required>
      </span>
      <div style="width: 80%; float: left; padding-right: 5px;">
        <input v-model="price" type="number" class="numberClass"
               @keyup="onKeyup"/>
      </div>
    </div>
    <label style="color: #959595; padding-left: 15px;font-size: 14px;">大写</label>
    <span class="chineseClass">{{simplifiedChinese}}</span>
  </div>
</template>

<script>
  import {TransferDom} from 'vux';
  import IsRequired from '@/components/IsRequired';
  
  export default {
    name: 'Amount',
    props: {
      pholder: {
        type: String,
        default: '请输入'
      },
      title: {
        type: String,
        default: '金额'
      },
      isRequired: {
        type: Boolean,
        default: true,
      }
    },
    components: {
      IsRequired
    },
    directives: {
      TransferDom,
    },
    data() {
      return {
        errorShow: false,
        errorText: '',
        price: null,
        simplifiedChinese: '',
      };
    },
    methods: {
      onKeyup() {
        if (this.price) {
          if (this.price.length <= 10) {
            this.simplifiedChinese = this.smalltoBIG(this.price);
          } else {
            this.simplifiedChinese = '非法输入';
          }
        } else {
          this.simplifiedChinese = '';
        }
      },
      smalltoBIG(price) {
        let fraction = ['角', '分'];
        let digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
        let unit = [['圆', '万', '亿'], ['', '拾', '佰', '仟']];
        let head = price < 0 ? '欠' : '';
        price = Math.abs(price);
        let upper = '';
        for (let i = 0; i < fraction.length; i++) {
          upper += (digit[Math.floor(price * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
        }
        upper = upper || '整';
        price = Math.floor(price);
        for (let i = 0; i < unit[0].length && price > 0; i++) {
          let p = '';
          for (let j = 0; j < unit[1].length && price > 0; j++) {
            p = digit[price % 10] + unit[1][j] + p;
            price = Math.floor(price / 10);
          }
          upper = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + upper;
        }
        return head + upper.replace(/(零.)*零圆/, '圆').replace(/(零.)+/g, '零').replace(/^整$/, '零圆整');
      },
    },
  };
</script>
<style type="less">

  .chineseClass {
    font-size: 14px;
    color: #959595;
    text-align: right;
    display: inline-block;
    width: 80%;
  }

  .numberClass {
    text-align: right;
    border: 0;
    width: 100%;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
    height: 1.41176471em;
    line-height: 1.41176471;
    padding-right: 20px;
  }
  .amountTitle {
    padding-left: 15px;
    display: inline-block;
    width: 20%;
    float: left;
  }
</style>