1.创建showCase.js文件
vue项目中input金额输入框显示金额大写
转载const ShowCase = {
inserted(el) {
let pHtml =
"<p style='border-radius: 3px;z-index: 999;padding: 5px 10px;position: absolute;top: 40px;left:0;background: #667afa;color: aliceblue;min-width: 80px;line-height: 20px;'></p>";
el.addEventListener(
"focus",
() => {
el.insertAdjacentHTML("beforeend", pHtml);
let elInput = el.getElementsByTagName("input")[0];
// console.log(elInput.value)
if (!elInput.value) {
el.getElementsByTagName("p")[0].style.display = "none";
} else {
el.getElementsByTagName("p")[0].style.display = "block";
el.getElementsByTagName("p")[0].innerText = changeHcase(elInput.value);
}
},
true
);
el.addEventListener(
"click",
() => {
let elInput = el.getElementsByTagName("input")[0];
if (!elInput.value) {
el.getElementsByTagName("p")[0].style.display = "none";
} else {
el.getElementsByTagName("p")[0].style.display = "block";
el.getElementsByTagName("p")[0].innerText = changeHcase(elInput.value);
}
},
false
);
el.addEventListener(
"blur",
() => {
el.removeChild(el.getElementsByTagName("p")[0]);
},
true
);
el.addEventListener(
"keyup",
() => {
let elInput = el.getElementsByTagName("input")[0];
if (!elInput.value) {
el.getElementsByTagName("p")[0].style.display = "none";
} else {
el.getElementsByTagName("p")[0].style.display = "block";
el.getElementsByTagName("p")[0].innerText = changeHcase(elInput.value);
}
},
false
);
}
}
function changeHcase(n) {
// let n = elInput.value;
let fraction = ["角", "分"];
let digit = [
"零",
"壹",
"贰",
"叁",
"肆",
"伍",
"陆",
"柒",
"捌",
"玖",
];
let unit = [
["元", "万", "亿"],
["", "拾", "佰", "仟"],
];
let head = n < 0 ? "欠" : "";
n = Math.abs(n);
let s = "";
for (let i = 0; i < fraction.length; i++) {
s += (
digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]
).replace(/零./, "");
}
s = s || "整";
n = Math.floor(n);
for (let i = 0; i < unit[0].length && n > 0; i++) {
let p = "";
for (let j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s =
p.replace(/(零.)*零$/, "").replace(/^$/, "零") + unit[0][i] + s;
}
let ret =
head +
s
.replace(/(零.)*零元/, "元")
.replace(/(零.)+/g, "零")
.replace(/^整$/, "零元整");
return ret;
}
export default ShowCase;
2.组件中引入
import ShowCase from "../../utils/showCase.js";
directives: {
ShowCase,
},
3.组件中应用
<el-input v-show-cas placeholder="请输入"></el-input>
完事儿,全是干货~
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
详解: input[type=html 复选框 php 单选按钮 数组