★ FEATURED ARTICLE 前端UI组件跨平台【免费下载链接】uv-uiuv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端基于uni-app和uView2.x的生态框架支持单独导入开箱即用利剑出击。项目地址https://gitcode.com/gh_mirrors/uv/uv-ui点击查看免费下载导读本文围绕 uv-ui 生态框架中的uv-badge徽标数组件展开讲解其在 Appvue/nvue、H5、各类小程序等多端场景下的核心能力以「圆点」和「圆包含文字」两种形态在图标或区块右上角展示未读消息数量、状态提示等角标信息。读完本文你将掌握uv-badge的全部配置参数、三种数字超限显示策略、主题与定位定制方法并理解其基于 uni-app 的源码实现原理可直接在业务中落地使用。一、组件定位与应用场景uv-badge是 uv-ui 框架中的徽标数数字角标组件在 readme.md 中对其定位描述为一般用于图标右上角显示未读的消息数量提示用户点击有圆点和圆包含文字两种形式。典型业务场景包括消息中心、TabBar、导航栏图标右上角的未读数提示购物车、订单模块中的数量角标状态类的纯圆点提示如有新消息的红点。该组件在仓库中位于 uni_modules/uv-badge组件名uv-badge当前版本1.0.2见 package.json官方文档声明其全面兼容 Vue2/Vue3、app-vue、app-nvue、H5 以及微信/阿里/百度/字节/QQ 等小程序平台依赖 uv-ui-tools 作为基础工具库。二、安装与引入方式uv-badge以 uni_modules 规范发布因此安装后无需在pages.json或main.js中手动注册uni-app 的 easycom 机制会自动扫描uni_modules目录并完成组件注册直接以uv-badge标签使用即可。changelog见 changelog.md中特别说明1.0.1版本优化了组件依赖修改后无需全局引入、组件导入即可使用1.0.2修复了type等属性为null时徽标不显示的 BUG。因此建议使用1.0.2及以上版本。组件运行时依赖uv-ui-tools提供的mixin、mpMixin与工具函数二者随 uni_modules 一并导入即可。仓库中的示例页面已演示了组件用法入口配置见 components.config.jspath: /pages/componentsD/badge/badge对应示例源码为 badge.nvue可在 Demo 首页进入 Badge 徽标数 页面直接查看运行效果。三、基础用法在任意页面模板中直接使用template view !-- 图标右上角显示未读消息数 -- view styleposition: relative; text消息/text uv-badge :value9 absolute/uv-badge /view !-- 纯圆点提示 -- uv-badge :value1011 numberTypeoverflow isDot/uv-badge !-- 数字超出最大值显示 999 -- uv-badge :value1500 :max999/uv-badge /view /template组件默认渲染为一个text标签源码见 uv-badge.vue并依据isDot在圆点与文字徽标之间切换。当isDot为true时只渲染圆点、不渲染文字否则渲染由numberType与max共同计算出的showValue文本。四、全部配置参数详解uv-badge的 Props 全部定义在 props.js并通过 mixin 混入组件。完整参数如下表参数类型默认值说明isDotBooleanfalse是否显示圆点为true时不显示文字valueNumber | String显示的内容数值或文本showBooleantrue是否显示整个 BadgemaxNumber | String999最大值超过时按numberType策略截断显示typeStringerror主题类型error|warning|success|primaryshowZeroBooleanfalse数值为0时是否仍展示 BadgebgColorStringnull背景色优先级高于type设置后type失效colorStringnull字体颜色不设置时使用主题色对应的前景色shapeStringcircle徽标形状circle四角圆角|horn左下角直角numberTypeStringoverflow数字显示方式overflow|ellipsis|limitoffsetArray[]位置偏移[x, y]分别对应top与rightabsolute为true时生效invertedBooleanfalse是否反转背景色与字体颜色镂空反色效果absoluteBooleanfalse是否绝对定位挂靠父组件右上角customStyleObject | String{}自定义外部样式由 uv-ui-tools 的公共 mixin 提供customStyle等公共 props 定义于 uv-ui-tools 的 mixin.js所有 uv-ui 组件通用。关键参数行为说明showshowZero组合模板中的渲染条件为show ((Number(value) 0 ? showZero : true) || isDot)即value为 0 时默认不显示需显式设置showZero为true才会渲染isDot为true时不受此限制。bgColor与type的优先级源码中style.backgroundColor仅在设置bgColor且未开启inverted时写入内联样式覆盖主题类名的背景色同时props.js注释明确优先级比 type 高如设置type 参数会失效。inverted反转逻辑开启后组件不渲染背景填充而是使用主题色作为文字颜色例如uv-badge--error--inverted类仅设置color实现描边数字的镂空效果。五、三种数字超限显示策略numberType 深入numberType决定数值过大时的呈现方式其核心逻辑位于 uv-badge.vue 的showValue计算属性numberType判定基准超限表现示例overflow与max比较显示${max}value1500, max999→999ellipsis与max比较显示省略号...value5132→...limit固定以 1000 为界超过 1000 转为K/w单位1500→1.5k45187→4.51w从源码可见三种策略的实际计算showValue() { switch (this.numberType) { case overflow: // 超过 max 显示 max return Number(this.value) Number(this.max) ? this.max : this.value; case ellipsis: // 超过 max 显示 ... return Number(this.value) Number(this.max) ? ... : this.value; case limit: // 以 1000 为界 9999 转 w否则转 k最多保留 2 位小数 return Number(this.value) 999 ? Number(this.value) 9999 ? Math.floor(this.value / 1e4 * 100) / 100 w : Math.floor(this.value / 1e3 * 100) / 100 k : this.value; default: return Number(this.value); } }注意limit模式固定以 1000/9999 为阈值、与max无关单位换算采用向下取整Math.floor保留两位小数。示例页面 badge.nvue 中同时演示了三种模式5132 ellipsis、1011 overflow、1500 limit、45187 limit。六、主题类型与样式定制内置主题色组件支持error、warning、success、primary四种type对应颜色定义在 uv-ui-tools 的 theme.scss$uv-primary→#3c9cff$uv-warning→#f9ae3d$uv-success→#5ac725$uv-error→#f56c6c$uv-info→#909399源码 SCSS 亦预留 info 主题主题类名的生成规则为uv-badge--${type}并在inverted时追加--inverted后缀对应类uv-badge--error--inverted等。SCSS 中所有主题色变量均以!default声明如$uv-badge-primary: $uv-primary !default可在项目 SCSS 中覆写以全局定制徽标颜色。uv-badge :value9 typeerror/uv-badge uv-badge :value9 typewarning/uv-badge uv-badge :value9 typesuccess/uv-badge uv-badge :value9 typeprimary/uv-badge自定义颜色业务中更常用的是直接指定颜色优先级高于主题!-- 红色背景 白色文字type 参数将失效 -- uv-badge :value12 bgColor#e64340 color#ffffff/uv-badge反转色镂空数字inverted模式下背景被移除、仅保留主题色文字常配合bgColor制造白底彩字效果uv-badge :value999 typeprimary inverted/uv-badge uv-badge :value1532 typewarning inverted/uv-badge七、形状与定位控制shape圆角与直角circle默认四角均为圆角类名uv-badge--dot圆点模式或通用圆角样式horn左下角直角border-bottom-left-radius: 0呈现气泡尾巴式的角标形态示例见 badge.nvue 的直角边形状区块uv-badge :value1500 shapehorn。absolute offset挂靠右上角absolute为true时组件设置position: absolute以挂靠父容器右上角offset数组[x, y]分别控制top与right值其中right缺省时取top的值。源码实现uv-badge.vueif (this.absolute) { style.position absolute if (this.offset.length) { const top this.offset[0] const right this.offset[1] || top style.top this.$uv.addUnit(top) style.right this.$uv.addUnit(right) } }addUnit来自 uv-ui-tools 的 function/index.js数值自动追加px或全局配置的unit已有rpx/%等单位的原样保留。典型用法view styleposition: relative; uv-icon namechat/uv-icon uv-badge :value9 absolute :offset[0, 0]/uv-badge /view八、圆点模式与显隐控制圆点模式只需设置isDotuv-badge isDot/uv-badge uv-badge :value1011 numberTypeoverflow isDot/uv-badge圆点尺寸与位置由 SCSS 变量控制见 uv-badge.vue 样式部分$uv-badge-dot-size: 8px圆点直径、$uv-badge-dot-radius: 100px圆角、$uv-badge-dot-right: 4px、$uv-badge-dot-top: 0均以!default声明可覆写。文字模式下的字号$uv-badge-text-font-size: 11px、内边距$uv-badge-text-padding: 2px 5px同样可定制。显隐控制通过show与showZero完成showfalse时完全不渲染值为 0 时默认隐藏需showZero才显示0适用于0 条消息不显示角标的常见需求。九、源码实现要点多端兼容原理极轻的渲染结构整个组件仅输出一个text节点通过条件渲染v-if控制存在性无多余包裹层利于 nvue 与各小程序端性能。多端 mixin 组合组件混入mpMixinmpMixin.js与公共mixinmixin.js。mpMixin在微信小程序下开启virtualHost: true将自定义节点设为虚拟节点以贴合 Vue 组件的 flex 表现公共mixin提供customStyle、customClass等通用 props 及$uv工具方法挂载。样式注入customStyle经$uv.addStylefunction/index.js合并进内联样式支持字符串与对象两种写法。主题色扩展SCSS 中声明了$uv-badge-primary/error/success/info/warning五组变量并预留info主题后续版本扩展主题类型只需新增类名与变量。十、版本与兼容性说明当前仓库内uv-badge版本为1.0.2package.json要求 HBuilderX^3.1.0运行时依赖 uv-ui-tools。官方兼容矩阵覆盖Vue2/Vue3、Appapp-vue/app-nvue、H5移动端与 PC 主流浏览器、微信/阿里/百度/字节/QQ 小程序。已知修复记录1.0.2修复type为null时徽标不显示的问题因此若需传null动态切换主题务必使用该版本1.0.1起无需全局注册、组件导入即用。完整可运行的示例代码位于 badge.nvue涵盖直角形状、三种数字显示方式、圆点、四类主题与反转色等全部典型场景可直接对照本文参数表在项目中组合使用。赞分享前端UI组件跨平台【免费下载链接】uv-uiuv-ui 破釜沉舟之兼容vue32、app、h5、小程序等多端基于uni-app和uView2.x的生态框架支持单独导入开箱即用利剑出击。项目地址https://gitcode.com/gh_mirrors/uv/uv-ui点击查看免费下载相关推荐TDesign 徽标组件 Badge 完全指南UniApp 下的角标、红点与数字徽标实践TDesign 徽标组件 Badge 完全指南UniApp 下的角标、红点与数字徽标实践 Badge徽标 用于告知用户某个区域的状态变化或待处理任务的数量前端UI组件小程序设计系统移动开发Ant Design Blazor Badge 徽标组件完全指南计数角标、状态点与缎带徽标实战Ant Design Blazor Badge 徽标组件完全指南计数角标、状态点与缎带徽标实战 导读 Badge徽标是 Ant Design Blazor前端UI组件设计系统uni-app x 数字角标 uni-badge-view 组件完全指南红点、文字徽章与容器角标的实现原理与实战uni app x 数字角标 uni badge view 组件完全指南红点、文字徽章与容器角标的实现原理与实战 本文以 uni app xVue3 u示例工程前端移动开发跨平台上一篇uinames.com错误处理指南常见API错误及解决方法下一篇LingBot-Map双向scale帧是什么为什么推理前需要8帧标定创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
