【UniApp】-uni-app-处理项目输入数据(苹果计算器)

前言

  • 上一篇文章完成了项目的基本布局,这一篇文章我们来处理一下项目的输入数据
  • 项目的输入数据主要是通过按键来输入的,所以我们需要对按键进行处理
  • 那么我们就来看一下 uni-app-处理项目输入数据

步入正题

  • 在上篇文章中,我在 data 中定义了一个 buttons
  • 每个元素中,有一个 func 属性,这个属性就是告诉程序如果按下的话,需要执行什么操作,这里可以采用 switch 语句来进行处理

好,那么我们就来看一下具体的代码,在上一篇中,我给每一个元素都绑定了一个点击事件,接下来只需要在这个点击事件中进行处理就可以了,代码如下:

vue 复制代码
<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 方法。

主要处理的逻辑分别为:

  1. 如果输入的是 .,并且如果已经有了 .,那么就什么都不做
javascript 复制代码
if (params == "." && this.showValue.indexOf(".") > -1) return;
  1. 判断当前输入内容长度是否超过 11, 如果超过了,就什么都不做
javascript 复制代码
if (this.showValue.length >= 11) return;
  1. 如果输入的不是 .,并且如果当前输入内容是 0,那么就把当前输入内容替换为输入的内容
  2. 如果是其它内容,那么就追加到当前输入内容的后面
javascript 复制代码
if (params != "." && this.showValue == "0") {
    this.showValue = params + "";
} else {
    // 如果是其它内容, 那么就追加
    this.showValue += params + "";
}
  1. 如果是整数,还需要添加位数符号,比如 1,000,000
javascript 复制代码
if (params != "." && this.showValue.indexOf(".") == -1) {
    let num = parseInt(this.showValue.replaceAll(",", ""));
    this.showValue = num.toLocaleString();
}

好了理清楚大致的思路之后,接下来就是将思路转变为代码即可,最终代码如下:

vue 复制代码
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 将整数转换为带有位数符号的字符串, 这样就完成了整数的位数符号添加。

运行测试效果:

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力
相关推荐
开开心心_Every27 分钟前
便捷的Office批量转PDF工具
开发语言·人工智能·r语言·pdf·c#·音视频·symfony
群联云防护小杜1 小时前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1232 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜052 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界2 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
良辰未晚2 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas