前言

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

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: 图像处理入门 1（Introduction to image processing）

如何获得一张照片 （How to obtain a photo）？ 每次看到一些光学设备的规格介绍的时候，一些专用名词，例如：等效焦距，曝光模式 等 让你一头雾水。爱学习的你一定十分好奇他们是什么意思。每次看到摄影师拍出的十分惊艳的照片时，你总是满脸羡慕，有一…