前言

• 本文主要介紹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

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

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-动态计算字体大小(苹果计算器)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。