【UniApp】-uni-app-动态计算字体大小(苹果计算器)

合集 - UniApp(23)

1.【UniApp】-uni-app概述2023-12-072.【UniApp】-uni-app全局样式和局部样式2023-12-073.【UniApp】-uni-app-全局数据和局部数据2023-12-084.【UniApp】-uni-app-内置组件2023-12-095.【UniApp】-uni-app-扩展组件2023-12-096.【UniApp】-uni-app-修改组件主题和样式2023-12-107.【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期2023-12-108.【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期2023-12-119.【UniApp】-uni-app-路由2023-12-1610.【UniApp】-uni-app-传递数据2023-12-1611.【UniApp】-uni-app-CompositionAPI传递数据2023-12-1712.【UniApp】-uni-app-数据传递补充2023-12-1713.【UniApp】-uni-app-数据缓存2023-12-1714.【UniApp】-uni-app-pinia存储数据2023-12-1915.【UniApp】-uni-app-网络请求2023-12-2016.【UniApp】-uni-app-自定义组件2023-12-2117.【UniApp】-uni-app-项目实战页面布局(苹果计算器)2023-12-2418.【UniApp】-uni-app-处理项目输入数据(苹果计算器)2023-12-24

19.【UniApp】-uni-app-动态计算字体大小(苹果计算器)2023-12-25

20.【UniApp】-uni-app-项目计算功能(苹果计算器)2023-12-2621.【UniApp】-uni-app-打包成网页2023-12-2822.【UniApp】-uni-app-打包成小程序2023-12-2823.『UniApp』uni-app-打包成App2023-12-30

收起

前言

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

• 如果你有任何问题或建议，欢迎在下方留言，我会尽快回复
• 如果你觉得本文对你有帮助，欢迎点赞、收藏，你的支持是我写作的最大动力

• 前言
• 正文
• End

__EOF__