工程狮
工程狮
  • 发布:2024-08-26 19:21
  • 更新:2024-08-30 10:38
  • 阅读:215

【报Bug】nvue 的 vue3 版本 text 文字显示有偏差,不是水平居中,而 vue2 正常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 13.5 (22G74)

HBuilderX类型: Alpha

HBuilderX版本号: 4.26

手机系统: Android

手机系统版本号: Android 14

手机厂商: 华为

手机机型: P40

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<text class="test">spends big<text>  
.test {  
    height: 22px;  
    line-height: 22px;  
    font-size: 18px;  
    color: #3d3d3d;  
    text-align:center;  
    background: rgba(115, 225, 205, 0.3);  
}

操作步骤:

分别使用 vue3 和 vue2 的 nvue 使用 text 显示英文短语

预期结果:

vue3 和 vue2 一样文字水平对齐

实际结果:

vue3 紧靠底部,这样很影响我们软件的展示效果

bug描述:

使用 vue3 的 text 显示文字,字母整体偏下,不是水平居中

<text class="test">spends big<text>  
.test {  
    height: 22px;  
    line-height: 22px;  
    font-size: 18px;  
    color: #3d3d3d;  
    text-align:center;  
    background: rgba(115, 225, 205, 0.3);  
}

如图所示,图中 p 完全靠底部,而 b 上面还有位置,g 也是紧靠底部

第一张图是 vue2 版本是显示正常的,第二张图是 vue3 版本,用红色标记了不同的位置

iOS 也是一样的情况

2024-08-26 19:21 负责人:无 分享
已邀请:
工程狮

工程狮 (作者)

能不能处理一下这个问题啊,很影响我们软件的使用

DCloud_heavensoft

DCloud_heavensoft

nvue已经不维护了,在意app性能,请升级为uni-app x。对性能不敏感的,请使用vue

  • 工程狮 (作者)

    大佬,非常非常抱歉,找到了问题,text 组件没有问题,是我的主页面定义了一个css类名和这个组件的类名相同,导致高度一直不变,一直使用主页面设定的高度。对此非常抱歉,还望谅解菜鸟的无知~_~,多有打扰

    2024-08-31 23:48

工程狮

工程狮 (作者)

再啰嗦一句,你们有没有怀疑过 uni-app x 这个开发模式有悖于跨端开发的初衷,不应该是让开发者 简单高效 吗,Android 版的跟原生开发一个工作量,而且还有考虑 uts 的 学习成本和 bug,额外再增加工作量

  • DCloud_heavensoft

    学习是有成本的。但和原生一个工作量是不可能的,uni-app x的工作量比原生简单太多了,原生随便一个简单功能都要好多流程和代码

    2024-09-01 16:08

LGG233

LGG233 - others

这个是怎么实现的?能不能通过调整行高去优化下?

  • LGG233

    在项目中我基本不使用text组件,效果不好,如果可以的话可以换成view组件

    2024-08-30 10:43

  • 工程狮 (作者)

    回复 3***@qq.com: nvue 里面显示动态变化的文字需要使用text。行高设置了,问题是 text-align 为 center,本应该是居中显示,实际显示时文字紧靠底部,应该是里面高度计算的问题

    2024-08-30 10:51

  • LGG233

    回复 工程狮: 那就没办法了,nvue只能使用text

    2024-08-30 10:59

要回复问题请先登录注册