【报Bug】button组件在nvue页面圆角border-radius失效表现异常

分类：uni-app

bug已修复

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： windows@10.0.26100

HBuilderX类型：正式

HBuilderX版本号： 4.55

手机系统： Android

手机系统版本号： Android 10

手机厂商：小米

手机机型： MI 8

页面类型： nvue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<button  
    style="width: 108px; height: 44px; border-radius: 55px;"  
>  
    退出登录  
</button>

操作步骤：

新建一个nvue页面，运行至安卓自定义基座

预期结果：

按钮button圆角样式表现正常

实际结果：

圆角不正常，请参照附件图

bug描述：

button组件在nvue页面圆角样式border-radius失效表现异常，上一个版本无此问题，更新了Hbuilder X版本到4.55开始出现，自定义基座运行后，style设置了border-radius，但是左上角的圆角不生效。

2025-03-11 补充

上述问题标准基座运行也会出现。

button组件使用class设置样式也会出现异常
异常1：class中的border无法被设置为0，会有一个黑色边框，将border：0设置在button的style上可解决该问题，但改动工作量较大。
异常2：很多样式库将border-radius设置过大，以保证各高度下的圆角，但新版本会表现为按钮一个角为尖角，其余3个角为直角。

上述异常在上个版本中是没有的，具体代码如下，截图请参照附件

<button  
    class="m-btn m-round"  
>  
    测试按钮  
</button>

.m-btn {  
    border: 0;  
    padding: 0 18px;  
    height: 52px;  
}  

.m-btn.m-round {  
    border-radius: 1000px;  
}

2025-03-10 15:56 负责人:无分享

5 个回复

最佳回复

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信

更新：
HBuilderX 4.56.2025031210 已修复。

问题已确认，安卓+nvue+uniapp+button style 设置radius 会出现问题。 border-radius 生效时候被默认的 border-radius 错误重置了左上角。导致样式错误。

临时兼容方案：

对 button style 设置 radius 的地方，设置为 class 或者 style 追加 border-top-left-radius ，从而避开默认 style 的覆盖

稍等提供覆盖文件的方式，修复此问题。

ios 是否正常，安卓标准基座开发阶段是否正常？

3***@qq.com (作者)

您好，麻烦您查看一下3月11的问题补充，IOS目前没有设备，没有调试。

2025-03-11 14:48
retrocode

我测试了下, 4.55.2025030718 新建项目,使用标准基座直接运行, 在nvue下也有相同问题, IOS我手表暂时没有签名证书无法验证的.

2025-03-11 14:50
3***@qq.com (作者)

IOS表现正常，测试设备：型号：Iphone X；版本：IOS 16.7.10

2025-03-11 16:28
DCloud_UNI_OttoJi

回复 3***@qq.com: 更新HBuilderX 4.56.2025031210 再试一下

2025-03-13 11:37
DCloud_UNI_OttoJi

回复 retrocode: 更新HBuilderX 4.56.2025031210 再试一下

2025-03-13 11:37
retrocode

回复 DCloud_UNI_OttoJi: 现在好了, 早上我们更新测试了下, 现在样式已经正常了

2025-03-13 11:54

retrocode - 现已加入旺旺大礼包全家桶

我们也遇到这个问题了, 采用的是纯nvue模式, 可以确定是这个是 4.55.2025030718 最新的bug, 上个版本并无这个问题.
我看了下更新日志, 的确有 border-radius 相关的改动, 但是issue中说的是针对image的, 我不确定是不是这条导致的.
https://issues.dcloud.net.cn/pages/issues/detail?id=15258
还是希望官方尽快更新一下, 毕竟这个是UI bug, 而且很明显... 不好跟产品糊弄过去

DCloud_Android_ST

https://issues.dcloud.net.cn/pages/issues/detail?id=15258 改的是uni app x，用户帖子反馈是uni app nvue的

2025-03-11 11:40
retrocode

回复 DCloud_Android_ST: 这块的具体架构, 我就不清楚了, https://issues.dcloud.net.cn/pages/issues/detail?id=15526 , 我也找到另外一条,是关于button的border相关样式的改动, 但是issue里没有展示具体的内容,我也不好猜测, 可以确定是本次版本更新出现的问题, 我大致调试定位了下, 是button自带圆角的优先级问题, 你可以看一下我楼下的回复贴图. button设置圆角是个很常见的功能, 还是希望能尽快定位修复一下, 主要太明显了而且无法规避, 这个我们真不好跟产品和领导去糊弄.

2025-03-11 11:51
DCloud_Android_ST

回复 retrocode: 已经反馈了放心会尽快定位修复

2025-03-11 11:52