控件代碼
<template>
<Poptip trigger="focus" :content="getWord" >
<slot name="inputBox" @input="change"></slot>
</Poptip>
</template>
<script>
export default{
props: ['text'],
components: {},
data: function () {
return {
word: ''
}
},
computed: {
getWord(){
return this.convertCurrency(this.text);
}
},
created: function () {
},
methods: {
change(e){
this.word = this.convertCurrency(e);
},
convertCurrency(money) {
//漢字的數(shù)字
var cnNums = new Array('零', '壹', '貳', '叁', '肆', '伍', '陸', '柒', '捌', '玖');
//基本單位
var cnIntRadice = new Array('', '拾', '佰', '仟');
//對應(yīng)整數(shù)部分?jǐn)U展單位
var cnIntUnits = new Array('', '萬', '億', '兆');
//對應(yīng)小數(shù)部分單位
var cnDecUnits = new Array('角', '分', '毫', '厘');
//整數(shù)金額時后面跟的字符
var cnInteger = '整';
//整型完以后的單位
var cnIntLast = '元';
//最大處理的數(shù)字
var maxNum = 999999999999999.9999;
//金額整數(shù)部分
var integerNum;
//金額小數(shù)部分
var decimalNum;
//輸出的中文金額字符串
var chineseStr = '';
//分離金額后用的數(shù)組眶蕉，預(yù)定義
var parts;
if (money === '') { return ''; }
money = parseFloat(money);
if (money >= maxNum) {
//超出最大處理數(shù)字
return '';
}
if (money == 0) {
chineseStr = cnNums[0] + cnIntLast + cnInteger;
return chineseStr;
}
//轉(zhuǎn)換為字符串
money = money.toString();
if (money.indexOf('.') == -1) {
integerNum = money;
decimalNum = '';
} else {
parts = money.split('.');
integerNum = parts[0];
decimalNum = parts[1].substr(0, 4);
}
//獲取整型部分轉(zhuǎn)換
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;
}
//小數(shù)部分
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;
},
}
}
</script>
<style>
</style>
調(diào)用：
<template>
<div>
<InputCnBox :text="money">
<Input slot="inputBox" v-model.number="money"/>
</InputCnBox>
</div>
</template>
<script>
import InputCnBox from '../components/InputCnBox.vue';
export default {
components: {InputCnBox},
data: function () {
return {
money: 0,
}
},
computed: {},
created: function () {
},
mounted() {
},
updated() {
},
methods: {}
}
</script>
<style>
</style>
效果圖：
inputbox.gif
