更新记录
1.0.2(2025-05-15) 下载此版本
新增 fontWeight 属性 用于调整文字粗细 新增 customStyle 属性 用于外部传入自定义样式
1.0.1(2025-05-15) 下载此版本
文档优化
1.0.0(2025-05-15) 下载此版本
功能发布
查看更多平台兼容性
mk-auto-text-fit
文字大小自动适配容器宽度的组件,适用于微信小程序、H5、App(支持 Vue2 和 Vue3)。
使用方法
安装
将 mk-auto-text-fit
文件夹放入 uni_modules
下。
引用
<mk-auto-text-fit text="文字内容" color='red' />
属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
text | String | 必填 | 显示的文字 |
maxFontSize | Number | 40 | 最大字体大小(单位 px) |
minFontSize | Number | 10 | 最小字体大小(单位 px) |
lineHeight | Number | 1.2 | 行高比例 |
color | String | #000 | 文字颜色 |
fontWeight | String | normal | 文字粗细 |
customStyle | String/Object | '' | 外部传入样式,用于设置宽度、高度等容器样式 |
注意
组件默认宽高为 100%,如需控制宽度,请通过 customStyle 设置;
为提升性能,组件在文字变化后通过 setTimeout 延迟重新适配;
为避免初次加载时字体大小闪烁,可搭配容器设置最小宽度或骨架屏优化。