【UniApp】-uni-app-處理專案輸入資料(蘋果計算器)

BNTang發表於2023-12-24
APP蘋果

前言

  • 上一篇文章完成了專案的基本佈局，這一篇文章我們來處理一下專案的輸入資料
  • 專案的輸入資料主要是透過按鍵來輸入的，所以我們需要對按鍵進行處理
  • 那麼我們就來看一下 uni-app-處理專案輸入資料

步入正題

  • 在上篇文章中，我在 data 中定義了一個 buttons
  • 每個元素中，有一個 func 屬性，這個屬性就是告訴程式如果按下的話，需要執行什麼操作，這裡可以採用 switch 語句來進行處理

好，那麼我們就來看一下具體的程式碼，在上一篇中，我給每一個元素都繫結了一個點選事件，接下來只需要在這個點選事件中進行處理就可以了，程式碼如下：

<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. 如果輸入的是 .，並且如果已經有了 .，那麼就什麼都不做
if (params == "." && this.showValue.indexOf(".") > -1) return;
  1. 判斷當前輸入內容長度是否超過 11, 如果超過了，就什麼都不做
if (this.showValue.length >= 11) return;
  1. 如果輸入的不是 .，並且如果當前輸入內容是 0，那麼就把當前輸入內容替換為輸入的內容
  2. 如果是其它內容，那麼就追加到當前輸入內容的後面
if (params != "." && this.showValue == "0") {
    this.showValue = params + "";
} else {
    // 如果是其它內容, 那麼就追加
    this.showValue += params + "";
}
  1. 如果是整數，還需要新增位數符號，比如 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 將整數轉換為帶有位數符號的字串, 這樣就完成了整數的位數符號新增。

執行測試效果：

End

  • 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
  • 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支援是我寫作的最大動力

相關文章