//
效果图

这个大写的代码是我在网上复制过来的,如果作者看到可以留言我让我署名或者放链接(那个最大处理数字可能被我改过,但是我限制了表单输入字符,所以不会有其他bug,如果数值再大,会产生精确度的问题,这个我还没有找到答案,所以就先这样吧)
convertToChinaNum(money) {
var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖')
// 基本单位
var cnIntRadice = new Array('', '拾', '佰', '仟')
// 对应整数部分扩展单位
var cnIntUnits = new Array('', '万', '亿', '兆')
// 对应小数部分单位
var cnDecUnits = new Array('角', '分')
// 整数金额时后面跟的字符
var cnInteger = '整'
// 整型完以后的单位
var cnIntLast = '元'
// 最大处理的数字
var maxNum = 9999999999999999.9999
// 金额整数部分
var integerNum
// 金额小数部分
var decimalNum
// 输出的中文金额字符串
var chineseStr = ''
// 分离金额后用的数组,预定义
var parts
// if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(money)) return '数据非法'
if (money == '') { return '' }
money = parseFloat(money)
if (money >= maxNum) {
// 超出最大处理数字
return ''
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast + cnInteger
return chineseStr
}
// 转换为字符串
money = money.toString()
if (money.indexOf('.') == -1) {
integerNum = money
decimalNum = ''
} else {
parts = money.split('.')
integerNum = parts[0]
decimalNum = parts[1].substr(0, 2)
}
// 获取整型部分转换
if (parseInt(integerNum, 10) > 0) {
var zeroCount = 0
var IntLen = integerNum.length
for (var i = 0; i < IntLen; i++) {
var n = integerNum.substr(i, 1)
var p = IntLen - i - 1
var q = p / 4
var m = p % 4
if (n == '0') {
zeroCount++
} else {
if (zeroCount > 0) {
chineseStr += cnNums[0]
}
// 归零
zeroCount = 0
chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
}
if (m == 0 && zeroCount < 4) {
chineseStr += cnIntUnits[q]
}
}
chineseStr += cnIntLast
}
// 小数部分
if (decimalNum != '') {
var decLen = decimalNum.length
for (var i = 0; i < decLen; i++) {
var n = decimalNum.substr(i, 1)
if (n != '0') {
chineseStr += cnNums[Number(n)] + cnDecUnits[i]
}
}
}
if (chineseStr == '') {
chineseStr += cnNums[0] + cnIntLast + cnInteger
} else if (decimalNum == '') {
chineseStr += cnInteger
}
return chineseStr
},
这个就是大写的代码了,复制了直接调用就可以了
<template v-slot:capitalize="scope">
<el-input :value="ruleForm.purchaseTaxUpper" />
</template>
<template v-slot:capitalize1="scope">
<el-input v-model="ruleForm.purchaseTaxLower" placeholder="请输入价税合计" maxlength="16" @input="capiBtn" @blur="taxLower" />
</template>
我用的是封装好的组件,所以用了插槽,有点懒,不想替换了,你们就把插槽替换成el-form-item就好
@input是输入时的事件,@blur是光标离开表单的事件
const numberTo = (rule, value, callback) => {
const regExp1 = /^\d+(.\d+)?$/ // 数字和小数点的正则
if (!regExp1.test(value.replace(/,/g, ''))) { // 替换掉千分符
return callback(new Error('请输入正确的数字'))
}
callback() // 如果不加这个会导致所有的校验跳过
}
这个校验是只校验数字和小数点,千分符被我替换掉了,但是如果只加这个校验,输入千分符的时候,千分符会被替换,多个千分符校验依然通过
capiBtn() {
this.ruleForm.purchaseTaxUpper = this.convertToChinaNum(this.ruleForm.purchaseTaxLower)
},
当触发input事件的时候,调用大写函数
taxLower() {
if (this.test + '' === this.ruleForm.purchaseTaxLower) { // 判断鼠标离开时的数据和移入是否有变化,没有变化的话就退出,不再继续向下执行,不然会变成NaN哦
return
}
this.ruleForm.purchaseTaxLower = this.ruleForm.purchaseTaxLower.replace(/,/g, '') // 把千分符替换掉,这样大写的数据也会一样展示出来了,不会判断成异常数据
if (isNaN(this.ruleForm.purchaseTaxLower)) { // 判断小写的数据格式是否正确
this.ruleForm.purchaseTaxUpper = '' // 不正确大写的数据就为空
return
}
this.test = (Number(this.ruleForm.purchaseTaxLower).toFixed(2) + '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g, '$1,') // 千分符+小数+去零
this.ruleForm.purchaseTaxLower = this.test
},
这里写的什么就将就看吧,因为是垃圾崽的代码,你们可以优化就优化
data() {
const numberTo = (rule, value, callback) => {
const regExp1 = /^\d+(.\d+)?$/ // 数字和小数点的正则
if (!regExp1.test(value.replace(/,/g, ''))) { // 替换掉千分符
return callback(new Error('请输入正确的数字'))
}
callback() // 如果不加这个会导致所有的校验跳过
}
return {
ruleForm: {
purchaseTaxUpper: '' // 大写
purchaseTaxLower: ''// 小写
},
test: 0
}
}
我自测是没有问题的,当然不排除我没发现其他的问题,我非常菜,所以有啥不对轻喷
