【UniApp】-uni-app-動態計算字型大小(蘋果計算器)

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

前言

  • 本文主要介紹uni-app中動態計算字型大小的方法
  • 原因呢就是在上一篇文章當中我發現輸入的內容已經超過了展示區域

  • 於是我就想到了動態計算字型大小的方法，這樣就可以保證輸入的內容不會超過展示區域

正文

  • 首先要改造的是 style="font-size: 180rpx;"

  • 這裡不能直接寫死，而是要動態改變，所以我在 data 當中定義了一個變數 curFontSize，預設值為 "180rpx", 並且替換掉了原來的 style="font-size: 180rpx;"
curFontSize: "180rpx",

:style="{fontSize: curFontSize}"

  • 然後下一步要做的事情就是監聽輸入內容的變化，動態改變 curFontSize 的值
  • 這裡使用 watch 監聽 showValue 的變化，然後在回撥函式中動態計算 curFontSize 的值
watch: {
    showValue(newVal, oldVal) {
        newVal += "";
        switch (newVal.length) {
            case 8:
                this.curFontSize = "160rpx";
                break;
            case 9:
                this.curFontSize = "150rpx";
                break;
            case 10:
                this.curFontSize = "130rpx";
                break;
            case 11:
                this.curFontSize = "120rpx";
                break;
            default:
                this.curFontSize = "180rpx";
                break;
        }
    }
},
  • 首先我將 newVal 轉換為字串，然後根據字串的長度來動態計算 curFontSize 的值
  • 這裡我設定了 5 種情況，當輸入的內容長度為 8 時，字型大小為 160rpx，當輸入的內容長度為 9 時，字型大小為 150rpx，當輸入的內容長度為 10 時，字型大小為 130rpx
  • 當輸入的內容長等於 11 時，字型大小為 120rpx，這裡我設定的最小值為 120rpx，當然你也可以設定為更小的值，這裡就不再贅述了
  • 最後一種情況就是預設情況，當輸入的內容長度不在上述範圍內時，字型大小為 180rpx
  • 這樣就可以保證輸入的內容不會超過展示區域了
  • 當然這裡的字型大小是可以根據自己的需求來設定的，這裡只是給出了一個參考值

執行效果如下：

End

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

相關文章