tabbar组件badgeStyle参数设置top和right不生效 - Githubissues

umicro / uView2.0

uView UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

MIT License

1.52k stars 458 forks source link

tabbar组件badgeStyle参数设置top和right不生效 #1045

Open Saxon-Liu opened 6 months ago

Saxon-Liu commented 6 months ago

版本

2.0.37

转载链接

www.uviewui.com

重现步骤

在u-tabbar-item组件中设置了badgeStyle以调整Badge的位置。
发现设置的top和right参数并未按预期应用到Badge元素上

期望的结果是什么？

期望badgeStyle中的top和right参数能够正常生效，允许用户自定义Badge在Tabbar项上的位置

实际的结果是什么？

实际上，由于样式合并问题，自定义的customStyle中的top和right属性被u-badge组件内badgeStyle的top和right所覆盖，从而导致自定义top和right失效。

错误分析

u-badge组件中badgeStyle的top和right值来源于uview-ui/components/u-tabbar-item/u-tabbar-item.vue的第26行的offset数据。 u-badge.vue line5 :style="[$u.addStyle(customStyle), badgeStyle]" u-tabbar-item.vue line 26 u-tabbar-item.vue :offset="[0, dot ? '34rpx' : badge > 9 ? '14rpx' : '20rpx']"
customStyle的默认参数包含默认的top和right，位于uview-ui/libs/config/props/tabbarItem.js第18行。
由于style顺序原因导致customStyle中包含的top和right被badgeStyle中的top和right覆盖

建议的解决方案

修改u-badge.vue文件在uview-ui/components/u-badge/u-badge.vue的第5行，将:style绑定表达式顺序调整为： :style="[badgeStyle, $u.addStyle(customStyle)]" 这样确保自定义样式可覆盖默认样式
更新tabbarItem.js默认值在uview-ui/libs/config/props/tabbarItem.js第18行，将默认的badgeStyle从 'top: 6px;right:2px;' 修改为空字符串： badgeStyle: ''
更新官方文档在uView官网关于Tabbar组件的文档中，将badgeStyle的默认值说明更新为空，并提示开发者可以自定义top和right等样式属性。