【UniApp】-uni-app-动态计算字体大小(苹果计算器)
2023/12/26 1:33:04
本文主要是介绍【UniApp】-uni-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
- 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
- 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力
这篇关于【UniApp】-uni-app-动态计算字体大小(苹果计算器)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-01为什么公共事业机构会偏爱 TiDB :TiDB 数据库在某省妇幼健康管理系统的应用
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署