<template>
<div class="BOX">
<!-- oninput="value=value.replace(/^(0+)|[^\d]+/g,'')" -- 能不能输入零 -->
<input
v-model="form.investMoney"
placeholder="请输入金额"
@input="formatInputNumber"
/>
</div>
<!-- span元素下面显示中文大写金额 -->
<div>
<span>大写金额:{{ form.text }}</span>
</div>
</template>
<script>
export default {
data() {
return {
form: { investMoney: "", text: "" },
inputNumber: "",
upperCaseRmb: "",
};
},
watch: {
"form.investMoney"(newVal) {
this.form.text = this.convertToUpperCase(newVal);
this.$emit("input", this.form);
},
},
methods: {
formatInputNumber() {
// 限制只能输入数字
this.form.investMoney = this.form.investMoney.replace(/[^\d]/g, "");
},
convertToUpperCase(num) {
// 转换数字为大写金额
const chars = [
"零",
"壹",
"贰",
"叁",
"肆",
"伍",
"陆",
"柒",
"捌",
"玖",
];
const units = [
"分",
"角",
"元",
"拾",
"佰",
"仟",
"万",
"拾",
"佰",
"仟",
"亿",
"拾",
"佰",
"仟",
];
let ret = "";
let temp = 0;
for (let i = 0; i < num.length; i++) {
temp = num.length - i - 1;
ret += chars[num.charAt(i)] + (units[temp] || "");
}
return ret
.replace(/零[仟佰角分]/g, "零")
.replace(/零{2,}/g, "零")
.replace(/零([亿|万])/g, "$1")
.replace(/零+元/, "元")
.replace(/零+/g, "零");
},
},
};
</script>
<style lang="scss" scoped>
.BOX {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
font-size: 16px;
color: #000;
input {
width: 100%;
height: 32px;
border-radius: 4px;
padding: 1px 11px;
background: #fff;
border: 1px solid var(--el-border-color);
&:focus {
border: 1px solid var(--el-color-primary);
}
&::-webkit-input-placeholder {
font-size: 14px;
color: var(--el-text-color-placeholder);
}
}
}
</style>