vue+element-ui金额大小写转换

子组件

<template>
  <div class="money-input">
    <div
      class="input-box"
      ref="money-input-box"
      @click="inputClick"
      @keyup="inputKeyUp($event)"
    >
      <el-input
        v-model="number"
        :placeholder="placeholder"
        @focus="inputFocus($event)"
        @keyup="inputKeyUp($event)"
        @change="inputEvent"
        size="small"
        maxlength="13"
        :readonly="read"
        :disabled="disabled"
        :style="{ width: width ? width + '!important' : '250px!important' }"
      ></el-input>
    </div>
    <p
      class="fontSize"
      :style="{ width: width ? width + '!important' : '250px!important' }"
    >
      <span v-if="negative">{{ `负` }}</span>
      {{ toChineseNumber }}
    </p>
  </div>
</template>

<script>
// 传入保存值的变量
export default {
  /**
   * @warning
   * @description 金额大写组件(支持负数)
   * @author
   * @param {Number,String} parentInputValue 传入要转换的数值
   * @param {Boolean} read 是否可读
   * @param {Boolean} disabled 是否禁用
   * @param {Number,String} width 输入框的宽度
   *
   */

  props: {
    change: {
      type: Function,
    },
    placeholder: {
      type: String,
      default: "请输入金额",
    },
    parentInputValue: {
      type: [Number, String],
      default: "",
    },
    parentChineseNumber: {
      type: String,
    },
    parentMoneyInputValue: {
      type: Number,
      default: 0,
    },
    read: {
      //只读判断  页面传来的为false时可以修改状态
      type: Boolean,
    },
    disabled: {
      //禁用属性   true为禁用
      type: Boolean,
      default: false,
    },
    width: {
      type: [Number, String],
      // default:250
    },
  },
  data() {
    return {
      number: "",
      maxMoney: "",
      toChineseNumber: "",
      saveToChineseNumber: "",
      // 输入框本身元素
      inputElement: null,
      selectionIndex: 0,
      oldNumber: "",
      isResetCursor: false,
      parentInputValueChild: this.parentInputValue,
      saveNumber: "", //后端保存的数值,
      negative: false,
    };
  },
  created() {
    this.getData();
    this.format(this.number);
    // console.log(this.width,'宽度')
  },
  watch: {
    parentInputValue(newVal, oldVal) {
      console.log(newVal, "newVal");
      console.log(oldVal, "oldVal");
      this.number = JSON.parse(JSON.stringify(this.parentInputValue));
      // console.log(this.number,'调用了watch里的parentInputValue')
      this.format(this.number);
    },
    chineseNumber(n, o) {
      this.parentChineseNumber = this.toChineseNumber;
    },
  },
  methods: {
    getData() {
      this.parentInputValueChild = this.parentInputValue;
      this.number = this.parentInputValueChild;
      if (this.parentInputValue !== "") {
        return (this.number = this.parentInputValueChild);
      } else {
        return (this.number = "");
      }
    },
    // input 失去焦点事件
    // inputBlur() {
    //   // this.inputValue = parseFloat(this.number);
    //   if (this.number.length > 3) {
    //     this.saveNumber = this.number.replace(/,/g,"")
    //   }else{
    //     this.saveNumber = this.number
    //   }
    //   console.log(this)
    //   this.$emit('inputBlur','')
    // },
    // input 键盘事件
    inputKeyUp(e) {
      const keyCode = e.keyCode;
      if (keyCode == 37 || keyCode == 39) {
        if (this.number) {
          // 没有值的首次输入 按默认的最后的输入位置
          // 有值的话获取光标位置 保存
          // 在输入的值没有发生任何变化之前保存旧值
          this.oldNumber = this.number;
          this.selectionIndex = this.inputElement.selectionEnd;
          if (this.selectionIndex < this.number.length) {
            this.isResetCursor = true;
          } else {
            this.isResetCursor = false;
          }
        }
      }
    },
    // input 点击事件触发
    inputClick() {
      if (this.number) {
        // 没有值的首次输入 按默认的最后的输入位置
        // 有值的话获取光标位置 保存
        // 在输入的值没有发生任何变化之前保存旧值
        this.oldNumber = this.number;
        this.selectionIndex = this.inputElement.selectionEnd;
        if (this.selectionIndex < this.number.length) {
          this.isResetCursor = true;
        } else {
          this.isResetCursor = false;
        }
      }
    },
    // focus 事件触发
    inputFocus(e) {
      this.inputElement = e.target;
    },
    // input 事件触发
    inputEvent(e) {
      // this.format(this.verification(this.number))
      this.format(this.verification(e));
      // console.log(this.saveNumber)
      // this.$emit('inputBlur',this)
    },
    // 拼接负数
    verifinegative(num) {
      return num;
    },
    // change 事件触发
    format(num) {
      console.log(num);
      // return
      let number = "";
      if (num) {
        // 每次触发清除变量中的 “，” 分隔符
        let n = this.clearSeparator(num);
        // 进行校验
        // console.log(num)
        if (num != 0 && num != null) {
          if (num.toString().indexOf("-") == -1) {
            // console.log('11')
            number = this.verification(n);
            this.negative = false;
          } else {
            this.negative = true;
            number = this.verifinegative(n);
          }
        }

        if (number.length > 3) {
          number = number.replace(/,/g, "");
        } else {
          number = number;
        }
        // console.log(number)
        number = parseFloat(number);
        if (number) {
          this.saveNumber = number;
        } else {
          this.saveNumber = 0;
          number = 0;
        }
        // this.number = number.toLocaleString();
        this.number = this.retain(number);
        if (this.$refs["money-input-box"]) {
          this.$emit("inputBlur");
        }
        console.log(n, "================");
        // 数字按金额规则大写
        this.toChineseNumber = this.numberToChinese(n);

        if (this.isResetCursor) {
          // 值发生变动时 按内容的增加或者删减来控制光标的位置
          if (this.oldNumber.length > this.number.length) {
            // 内容长度被删减
            this.selectionIndex -= this.oldNumber.length - this.number.length;
          } else if (this.oldNumber.length < this.number.length) {
            // 内容长度增加
            this.selectionIndex += this.number.length - this.oldNumber.length;
          }

          if (this.selectionIndex <= 0) {
            this.selectionIndex = 0;
          }
          // 重置光标到获取到的位置
          const inputTimeOut = setTimeout(() => {
            const reg = /^0{1,}&/;
            // reg.test(reg) ? this.selectionIndex =  : 2;
            this.inputElement.setSelectionRange(this.selectionIndex, this.selectionIndex);
            // 在输入的值没有发生任何变化之前跟新旧值
            this.oldNumber = this.number;
            clearTimeout(inputTimeOut);
          });
        }
      } else {
        this.saveNumber = 0;
        this.number = 0;
        this.toChineseNumber = this.numberToChinese(this.number);
        if (this.$refs["money-input-box"]) {
          this.$emit("inputBlur");
        }
      }
      // this.number = number
    },
    // 输入金额校验
    verification(num) {
      let back = "";
      const reg = /^\.|[^0-9\.]/g;
      const regDecimal = /[^0-9]/g;
      back = parseFloat(num).toString();
      // 首次过滤非 数字和小数点之外的内容
      back = (num + "").replace(reg, function () {
        return "";
      });
      console.log(back);

      // 截取小数点后内容
      const pointIndex = back.indexOf(".");
      if (pointIndex > 0) {
        back =
          back.substring(0, pointIndex + 1) +
          back.substr(pointIndex + 1, 2).replace(regDecimal, "");
      } else {
      }
      // console.log(back)
      // debugger
      return back;
    },

    // 清除显示值中的分隔符
    clearSeparator(num) {
      var regClear = /,/gi;
      return (num + "").replace(regClear, "");
    },

    // 将数字转换为中文
    numberToChinese(val) {
      let num = parseFloat(val).toString() || 0;
      if (num.length < 1) {
        return "";
      }
      if (num.indexOf("-") == -1) {
        num = num;
      } else {
        num = num.slice(1, num.length);
      }
      // console.log(num)
      var strOutput = "";
      var strUnit = "仟佰拾万仟佰拾亿仟佰拾万仟佰拾点";
      var strUnitPoint = "角分";
      var pointIndex = num.indexOf(".");
      // 根据小数点后数字的个数动态变换单位
      if (pointIndex >= 0) {
        strUnit += strUnitPoint.substr(0, num.substr(pointIndex + 1, 2).length);
        num = num.substring(0, pointIndex) + num.substr(pointIndex + 1, 2);
      }

      if (strUnit.length >= num.length) {
        // 超过中文单位的数字长度禁止输入 所以需要保存当前最大输入值
        if (strUnit.length === num.length) {
          this.maxMoney = this.number;
        }
        strUnit = strUnit.substr(strUnit.length - num.length);
        for (var i = 0; i < num.length; i++) {
          strOutput +=
            "零壹贰叁肆伍陆柒捌玖".substr(num.substr(i, 1), 1) +
            strUnit.substr(i, 1).replace(/角$/, "").replace(/分$/, "");
        }

        let StrChaneseMoney = strOutput
          .replace(/零角零分$/, "整")
          .replace(/元$/, "")
          .replace(/零[仟佰拾]/g, "零")
          .replace(/零{2,}/g, "零")
          .replace(/零([亿|万])/g, "$1")
          .replace(/零+元/, "")
          .replace(/亿零{0,3}万/, "亿")
          .replace(/^元/, "零元")
          .replace(/点$/, "");
        // 判断有无小数点
        this.saveToChineseNumber = StrChaneseMoney;

        if (StrChaneseMoney.indexOf("点") == -1) {
          // 没有小数点判断最后是否为零 如果未0截掉

          if (StrChaneseMoney[StrChaneseMoney.length - 1] == "零") {
            this.saveToChineseNumber = StrChaneseMoney.slice(
              0,
              StrChaneseMoney.length - 1
            );
          } else {
            this.saveToChineseNumber = StrChaneseMoney;
          }
        } else if (StrChaneseMoney.length) {
          if (StrChaneseMoney[StrChaneseMoney.indexOf("点") - 1] == "零") {
            let dot = StrChaneseMoney.split("点");

            if (dot[0].length == 1) {
              this.saveToChineseNumber = StrChaneseMoney;
            } else {
              this.saveToChineseNumber =
                dot[0].slice(0, dot[0].length - 1) + "点" + dot[1];
            }
            // this.saveToChineseNumber = StrChaneseMoney
            // this.saveToChineseNumber = StrChaneseMoney.split('点').join('')
          } else {
            this.saveToChineseNumber = StrChaneseMoney;
          }
        }
        // this.saveToChineseNumber = StrChaneseMoney
        if (this.number) {
          if (this.number.length == 1) {
            this.saveToChineseNumber = StrChaneseMoney;
            if (this.number == "0") {
              this.saveToChineseNumber = "零";
            }
          }
        }
        return this.saveToChineseNumber;
      } else {
        this.number = this.maxMoney;
        return this.saveToChineseNumber;
        console.warn("数字长度非法");
      }
    },
    //转换千分位保留两位小数
    retain(val) {
      if (val != null) {
        val = Math.floor(val * 100) / 100;
        val = Number(val).toFixed(2);
        val += "";
        if (!val.includes(".")) {
          val += ".";
        }

        return val
          .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
            return $1 + ",";
          })
          .replace(/\.$/, "");
      }
    },
  },
  directives: {
    nums: {
      bind: function (e, binding) {
        e.style.value = 0;
      },
    },
  },
};
</script>

<style>
.money-input > .input-box > .el-input > .el-input__inner {
  text-align: left !important;
  /* width: 250px!important; */
}
.money-input > .fontSize {
  margin-top: 10px;
  font-size: 8px !important;
  color: red;
  line-height: 12px;
}
</style>

父组件引入

<template>
  <div class="home">
    <AmountOfMoney></AmountOfMoney>
  </div>
</template>

<script>
/**
 * 该组件是 demo 组件 用于方便查看示例
 * @author 作者名称
 */
import AmountOfMoney from "./AmountOfMoney";
export default {
  components: {
    AmountOfMoney,
  },
};
</script>

<style scoped>
.home .el-input__inner {
  height: 36px;
  border-radius: 2px;
}
</style>

点击跳转原作者优快云@L