★ FEATURED ARTICLE 前端UI组件跨平台【免费下载链接】uv-uiuv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端基于uni-app和uView2.x的生态框架支持单独导入开箱即用利剑出击。项目地址https://gitcode.com/gh_mirrors/uv/uv-ui点击查看免费下载uv-read-more 是 uv-ui 生态中专门解决长内容默认收起、点击展开全部场景的组件常见于文章详情、协议全文、商品介绍等长文本页面。本文以uni_modules/uv-read-more/changelog.md的版本演进为主线结合组件源码、props 配置与仓库内演示页面完整讲解其工作流程、全部配置参数、事件机制以及 1.0.1 依赖优化与 1.0.2 rpx 高度修复背后的实现原理读完即可在 uni-app 项目中独立使用并定位相关问题。版本脉络与组件定位该组件的变更记录非常精简共经历三个版本勾勒出一条清晰的演进路径1.0.02023-05-10发布uv-read-more定位为展开组件1.0.12023-05-16优化组件依赖修改后无需全局引入组件导入即可使用1.0.22023-09-13修复全局设置 rpx 导致展开高度不对的 BUG。组件在当前仓库中的完整位置为 组件实现、参数定义演示页面位于 readMore.nvue并在 components.config.js 中登记为ReadMore 展开示例入口。据 package.json 声明组件版本为 1.0.2最低要求 HBuilderX 3.1.0宣称兼容 vue2/vue3、Appapp-vue 与 app-nvue、H5 以及微信、阿里、百度、字节跳动、QQ 等主流小程序平台且插件不采集任何数据。核心工作机制如何实现收起一段展开全文从 uv-read-more.vue 的源码可以梳理出组件的核心工作流其本质是一个高度测量 状态切换的过程。内容高度测量init → getContentHeight组件在mounted时调用init()流程如下通过this.$uv.guid()为内容节点生成唯一 classelId避免多实例间选择器冲突在getContentHeight()中先await this.$uv.sleep(30)延时 30ms等待节点渲染完成后再测量高度非 APP-NVUE 端通过this.$uvGetRect(. this.elId)底层是 uni.createSelectorQuery获取内容真实高度APP-NVUE 端则使用uni.requireNativePlugin(dom)的getComponentRect原生方法获取高度两种端侧实现互不干扰条件编译分隔。高度对比决定是否展示按钮拿到真实内容高度height后组件执行关键判断// 判断高度如果真实内容高度大于占位高度则显示收起与展开的控制按钮 if (height this.$uv.getPx(this.showHeight)) { this.isLongContent true this.status close }即只有当内容真实高度大于showHeight默认 400px时才认为这是长内容才会渲染底部的展开阅读全文按钮否则内容完整展示不出现任何切换入口。收起与展开的状态渲染模板中内容容器的高度由状态驱动view classuv-read-more__content :style{ height: isLongContent status close ? $uv.addUnit(showHeight) : $uv.addUnit(contentHeight,px), textIndent: textIndent } 收起状态closeisLongContent true时容器高度被钳制为showHeight配合外层overflow: hidden截断内容展开状态open容器高度切换为实测的contentHeight真实像素高度全部内容可见。切换事件点击底部文字区域触发toggleReadMore()toggleReadMore() { this.status this.status close ? open : close // 如果toggle为false隐藏收起部分的内容 if (this.toggle false) this.isLongContent false // 发出打开或者收齐的事件 this.$emit(this.status, this.name) }注意两点实现细节若toggle为false展开后组件会彻底隐藏切换按钮isLongContent被置为false用户只能展开不能收起适用于详情页内查看更多后不再收回的交互toggleReadMore向父组件分别派发open或close事件并把name参数原样回传方便多实例场景下区分事件来源。参数详解完整覆盖 props 定义props.js 中定义了组件的全部配置项实际使用时与uni.$uv?.props?.readMore合并支持全局默认配置覆盖。参数清单如下参数类型默认值说明showHeightString | Number400内容超出此高度才显示展开按钮单位 pxtoggleBooleanfalse展开后是否显示收起按钮closeTextString展开阅读全文收起状态下的提示文字openTextString收起展开状态下的提示文字colorString#2979ff提示文字与箭头图标的颜色fontSizeString | Number14提示文字大小单位 pxshadowStyleObject见下方说明收起时内容底部的渐变阴影样式textIndentString2em段落首行缩进的字符数nameString | Numberopen/close事件回调中返回的标识参数shadowStyle 的端差异处理shadowStyle的默认值在 props 中通过条件编译区分端侧这是该参数必须写在组件内、不能抽到外部公共配置中的原因——源码注释明确指出外部 js 中 uni 无法准确识别当前是否处于 nvue 环境shadowStyle: { type: Object, default: () ({ // #ifndef APP-NVUE backgroundImage: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%), // #endif // #ifdef APP-NVUE // nvue上不支持设置复杂的backgroundImage属性 backgroundImage: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5)), // #endif paddingTop: 100px, marginTop: -100px }) }非 nvue 端使用从透明到白色的linear-gradient(-180deg, ...)渐变模拟文字渐隐效果nvue 端因不支持复杂的backgroundImage语法退化为to top的简化渐变。同时以paddingTop: 100pxmarginTop: -100px的组合为按钮区腾出视觉空间。此外展开状态下计算属性innerShadowStyle会返回空对象即展开后自动去除阴影。1.0.2 修复剖析全局 rpx 配置下的高度一致性changelog 中 1.0.2 记录的修复全局设置 rpx导致展开高度不对的 BUG是理解组件单位体系的关键。它牵涉到 uv-ui 工具库中的两个核心函数单位工具函数addUnit 与 getPxaddUnit 负责为数值补单位其默认单位读取全局配置function addUnit(value auto, unit uni?.$uv?.config?.unit ? uni?.$uv?.config?.unit : px) { value String(value) return number(value) ? ${value}${unit} : value }getPx 则负责把任意单位值统一折算为像素数值其中rpx/upx会通过uni.upx2px换算function getPx(value, unit false) { if (number(value)) { return unit ? ${value}px : Number(value) } if (/(rpx|upx)$/.test(value)) { return unit ? ${uni.upx2px(parseInt(value))}px : Number(uni.upx2px(parseInt(value))) } return unit ? ${parseInt(value)}px : parseInt(value) }全局单位配置位于 config.jsunit: px是默认值开发者可通过uni.$uv.setConfig({ config: { unit: rpx } })见 main.js 中被注释的示例全局切换为 rpx。修复点如何生效从当前源码可以推断 1.0.2 的修复逻辑判断环节统一转 pxinit()中height this.$uv.getPx(this.showHeight)通过getPx把showHeight无论传入数字、px还是rpx统一换算成真实像素后再与实测高度比较避免了rpx 数值与 px 数值直接比较的偏差渲染环节单位分离模板中$uv.addUnit(showHeight)遵循全局unit配置全局设为 rpx 时按 rpx 渲染适配不同屏幕而实测的contentHeight固定以px单位渲染$uv.addUnit(contentHeight, px)因为它是createSelectorQuery返回的物理像素值不能再经过 rpx 二次换算。也就是说修复后比较走像素统一、展示走各自合理单位两条链路互不污染从而保证全局切换 rpx 时展开高度依然准确。这一点在使用时同样值得注意给showHeight传数值或 rpx 字符串均安全组件会自行换算。1.0.1 依赖优化从全局引入到按需导入changelog 中 1.0.1 记录优化组件依赖修改后无需全局引入组件导入即可使用。从当前仓库结构看这一变化体现在两个方面uni_modules 依赖声明package.json 中的uni_modules.dependencies明确声明了组件运行所需的三个依赖uni_modules: { dependencies: [ uv-ui-tools, uv-icon, uv-text ] }即uv-read-more内部复用了 uv-ui 的图标组件uv-icon箭头、文字组件uv-text提示语以及基础工具包uv-ui-toolsmixin 与工具函数。借助 uni_modules 的依赖机制使用方只需引入uv-read-moreuni-app 会自动带上其声明的依赖无需再手动全局注册 uv-ui 全家桶。mixin 的解耦复用组件脚本部分通过 mixin 组合能力接入基础设施uv-read-more.vueimport mpMixin from /uni_modules/uv-ui-tools/libs/mixin/mpMixin.js import mixin from /uni_modules/uv-ui-tools/libs/mixin/mixin.js import props from ./props.js export default { name: uv-read-more, mixins: [mpMixin, mixin, props], // ... }mixin.js提供$uvGetRect、getParentData等通用能力mpMixin.js提供小程序端适配props.js承载参数定义。这种工具包 图标 文本的最小化依赖结构正是组件导入即可使用的技术支撑——只要按 uni_modules 规范放置目录并声明 dependencies即可独立安装到任意 uni-app 工程。实战示例在页面中接入 uv-read-more仓库演示页 readMore.nvue 给出了一个完整可复用的接入范式uv-read-more refuvReadMore :showHeightshowHeight toggle openopen closeclose uv-parse :contentcontent loadload :tag-styletagStyle/uv-parse /uv-read-more对应脚本要点data() { return { showHeight: 200, tagStyle: { p: color: #606266; line-height: 24px; } } }, methods: { load() { // 富文本渲染完成后重新测量内容高度确保高度判断基于完整渲染结果 this.$refs.uvReadMore.init() }, open(name) { console.log(open, name) }, close(name) { console.log(close, name) } }该示例揭示了两个实战关键点内容可以任意嵌套uv-read-more内部使用slot/slot承载任意内容如uv-parse富文本、rich-text、普通文本段落等组件只关心容器高度不关心内容类型异步内容需手动刷新高度当插槽内容由异步数据渲染如富文本解析完成、网络加载完成时容器高度可能晚于mounted的测量时机。此时应通过ref调用组件暴露的init()方法强制重新测量这正是示例中loadload后调用this.$refs.uvReadMore.init()的原因。常规用法则简单得多例如直接包裹一段富文本uv-read-more :showHeight300 toggle rich-text :nodesarticleContent/rich-text /uv-read-more使用建议与注意事项综合源码实现归纳几点实践建议合理设置showHeight它决定多长才算长内容的阈值建议根据行高估算设showHeight为 300 且行高 24px则约显示 12.5 行后出现展开入口根据交互选择toggle需要展开后可再次收起时设toggle为true否则保持默认false让展开即收尾多实例场景用name区分同一页面多个uv-read-more时给每个实例传不同name在open/close回调中即可辨别事件来源异步内容记得调用init()插槽内容依赖异步渲染时在内容加载完成事件中通过 ref 重新触发高度测量单位体系安全showHeight传数字、px或rpx字符串均可组件内部统一转 px 比较全局unit配置为 rpx 也不会影响展开高度判断1.0.2 已修复。整体来看uv-read-more是一个高度自洽的轻量组件核心逻辑仅围绕测量真实高度 → 与阈值比较 → 状态驱动高度切换展开参数面覆盖文字、颜色、阴影、缩进与事件回调依赖面收敛到uv-icon、uv-text与uv-ui-tools三个最小单元三个 changelog 版本恰好对应了发布功能 → 解耦依赖 → 修复单位换算的完整迭代可作为研究 uv-ui 组件设计范式的一个小而完整的切入点。赞分享前端UI组件跨平台【免费下载链接】uv-uiuv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端基于uni-app和uView2.x的生态框架支持单独导入开箱即用利剑出击。项目地址https://gitcode.com/gh_mirrors/uv/uv-ui点击查看免费下载相关推荐Hyperf v2.1 版本更新深度解读依赖升级、核心组件演进与关键修复全景Hyperf v2.1 版本更新深度解读依赖升级、核心组件演进与关键修复全景 本文基于 Hyperf 开源仓库的官方变更记录系统梳理 v2.1 系列v2.后端Web框架微服务RPC框架异步编程从 uv-pep508 更新日志看 uv 的 PEP 508 依赖解析器演进脉络与源码实现从 uv pep508 更新日志看 uv 的 PEP 508 依赖解析器演进脉络与源码实现 本文以 uv 仓库中的 crates/uv pep508/Chan包管理器开发工具CLIuv-upload 上传组件版本演进与源码级解析从 1.0.0 到 1.0.6 的修复脉络uv upload 上传组件版本演进与源码级解析从 1.0.0 到 1.0.6 的修复脉络 本文以 uv ui 仓库中 uni_modules/uv uplo前端UI组件跨平台上一篇Spring Data Redis安全最佳实践保护你的数据和应用免受攻击的完整指南 下一篇如何使用KeyPass自动填充功能从设置到高效使用的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
