uni-app nvue rich-text组件关于nodes节点的attrs属性bug

uni-app nvue rich-text组件关于nodes节点的attrs属性bug

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.3.5
手机系统 Android
手机系统版本号 Android 9.0
手机厂商 小米
手机机型 小米6
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<rich-text  
    :nodes="[{  
        name: 'span',attrs:{class: 'label',style: 'color:#999999;fontSize:28rpx;font-size:14px'},  
        children: [{type: 'text',text: '请假时间：'}]  
    },{  
        name: 'span',attrs:{class: 'text',style: 'color:#333333;fontSize:28rpx;font-size:14px'},  
        children: [{type: 'text',text: '12月30日 09:00 - 2022年1月1日 09:00'}]  
    }]"&gt;  
</rich-text>

操作步骤：

请看上述代码 fontSize:28rpx; 在 app 平台生效；font-size:14px 在 H5 平台生效，class 在 app 平台不生效！

预期结果：

既然文档中没有刻意指明这一点，就说明 app 平台应该是和 H5 写法一致的，还请修复。

实际结果：

app 平台应该是和 H5 写法不一致，class 不生效

bug描述：

nvue 页面中 rich-text 组件关于 nodes 节点的 attrs 属性设置 class 不会在 app 中生效，而且 style 样式设置在 app 中不生效，需要改为小驼峰命名法命名，不要告诉我你们本来就是这么设计的！


更多关于uni-app nvue rich-text组件关于nodes节点的attrs属性bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

确实存在

更多关于uni-app nvue rich-text组件关于nodes节点的attrs属性bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不是说rich-text 全局支持 class 和 style 属性，不支持 id 属性吗。请问到底支持在哪里呢，我在社区也搜到有人反馈这问题了，这么久了没人管，是不是你们只是挑容易修复的问题，其他视而不见吗

官方，会记录，近期会修复吧

大佬 请问宽高是怎么写得啊

这是一个已知的nvue平台差异问题。在nvue的rich-text组件中，attrs属性的处理确实与H5平台存在以下差异：

  1. class属性不生效：nvue平台不支持通过attrs.class设置样式类，这是平台限制。

  2. style属性命名规范：nvue要求使用小驼峰命名法（如fontSize），而H5平台支持标准的CSS写法（如font-size）。

解决方案：

  • 对于样式设置，统一使用小驼峰命名法，并确保样式值在nvue中有效
  • 避免在nvue中使用class属性，直接在style中定义样式

建议的代码调整：

<rich-text  
    :nodes="[{  
        name: 'span',
        attrs: {
            style: 'color:#999999;fontSize:28rpx'
        },  
        children: [{type: 'text',text: '请假时间：'}]  
    },{  
        name: 'span',
        attrs: {
            style: 'color:#333333;fontSize:28rpx'
        },  
        children: [{type: 'text',text: '12月30日 09:00 - 2022年1月1日 09:00'}]  
    }]">  
</rich-text>
回到顶部