input 阿拉伯数字转换汉字数字

<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>

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值