好,那么我们就来看一下具体的代码,在上一篇中,我给每一个元素都绑定了一个点击事件,接下来只需要在这个点击事件中进行处理就可以了,代码如下:
<script>
export default {
methods: {
operate(item) {
const func = item.func;
const params = item.params;
switch (func) {
case "operator":
this.operator(params);
break;
case "inputText":
this.inputText(params);
break;
}
},
operator(params) {
console.log("计算操作");
},
inputText(params) {
console.log("输入操作");
}
}
}
</script>
好,那么我们来看一下效果,点击运算符,控制台输出 计算操作
,点击数字,控制台输出 输入操作
,效果如下:
首先来处理输入操作,也就是处理输入操作,好了,废话不多说直接肝代码,完成 inputText 方法。
主要处理的逻辑分别为:
.
,并且如果已经有了 .
,那么就什么都不做if (params == "." && this.showValue.indexOf(".") > -1) return;
if (this.showValue.length >= 11) return;
.
,并且如果当前输入内容是 0
,那么就把当前输入内容替换为输入的内容if (params != "." && this.showValue == "0") {
this.showValue = params + "";
} else {
// 如果是其它内容, 那么就追加
this.showValue += params + "";
}
1,000,000
if (params != "." && this.showValue.indexOf(".") == -1) {
let num = parseInt(this.showValue.replaceAll(",", ""));
this.showValue = num.toLocaleString();
}
好了理清楚大致的思路之后,接下来就是将思路转变为代码即可,最终代码如下:
inputText(params) {
// console.log("输入操作");
// 如果输入的是., 并且已经有., 那么什么都不做
if (params == "." && this.showValue.indexOf(".") > -1) return;
// 判断当前输入内容长度是否超过11, 超过11也什么都不做
if (this.showValue.length >= 11) return;
// 如果输入的不是., 并且当前没有数据, 那么就直接赋值
if (params != "." && this.showValue == "0") {
this.showValue = params + "";
} else {
// 如果是其它内容, 那么就追加
this.showValue += params + "";
}
// 如果是整数, 还需要添加位数符号
if (params != "." && this.showValue.indexOf(".") == -1) {
let num = parseInt(this.showValue.replaceAll(",", ""));
this.showValue = num.toLocaleString();
}
}
这里最为关键的代码就是添加位数符号, 通过 replaceAll(",", "")
将 ,
替换为空字符串, 然后通过 parseInt
将字符串转换为整数, 最后通过 toLocaleString
将整数转换为带有位数符号的字符串, 这样就完成了整数的位数符号添加。
运行测试效果:
如果您发现该资源为电子书等存在侵权的资源或对该资源描述不正确等,可点击“私信”按钮向作者进行反馈;如作者无回复可进行平台仲裁,我们会在第一时间进行处理!
加入交流群
请使用微信扫一扫!