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

前言

  • 本文主要介绍uni-app中动态计算字体大小的方法
  • 原因呢就是在上一篇文章当中我发现输入的内容已经超过了展示区域
  • 于是我就想到了动态计算字体大小的方法,这样就可以保证输入的内容不会超过展示区域

正文

  • 首先要改造的是 style="font-size: 180rpx;"
  • 这里不能直接写死,而是要动态改变,所以我在 data 当中定义了一个变量 curFontSize,默认值为 "180rpx", 并且替换掉了原来的 style="font-size: 180rpx;"
vue 复制代码
curFontSize: "180rpx",
vue 复制代码
:style="{fontSize: curFontSize}"
  • 然后下一步要做的事情就是监听输入内容的变化,动态改变 curFontSize 的值
  • 这里使用 watch 监听 showValue 的变化,然后在回调函数中动态计算 curFontSize 的值
vue 复制代码
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

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力
相关推荐
雪碧聊技术5 小时前
v-for的用法及案例
vue3·uniapp·v-for·购物车案例
nbsaas-boot5 天前
[特殊字符] 分享裂变新姿势:用 UniApp + Vue3 玩转小程序页面分享跳转!
小程序·uniapp·notepad++
weixin_ab16 天前
实战记录:minapp框架下跨机型接口调用顺序引发的兼容性问题
uniapp·机型兼容性问题
菌菇汤17 天前
微信小程序传参过来了,但是数据没有获取到
微信小程序·小程序·uniapp
等风也在等着你18 天前
uniapp评价组件
uniapp
weixin_ab20 天前
Uniapp 中 onShow 与 onLoad 的执行时机解析
uniapp
满分观测网友z20 天前
CSS实现元素撑满剩余空间的5种方法
uniapp
~央千澈~1 个月前
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
uni-app·uniapp
MaCa .BaKa1 个月前
39-居住证管理系统(小程序)
java·vue.js·spring boot·mysql·小程序·maven·uniapp
佛系菜狗1 个月前
【菜狗work前端】小程序加if判断时不及时刷新 vs Web
微信小程序·uniapp·web