uni-app rich-text 动态赋值BUG

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app rich-text 动态赋值BUG

信息类别 详情
产品分类 uni-app x/App
PC开发环境 Windows
操作系统版本 win10 专业版
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 Android
手机系统版本 Android 13
手机厂商 华为
手机机型 mate60
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

见附件

操作步骤：

见附件

预期结果：

设置为空值时不占位置 且能设置字体大小

实际结果：

没变化

bug描述：

动态更新ritchtext的值不生效 初始为空字符串时 点击设置值可以设置上 如果修改值时不生效，修改为空字符串时不生效 修改为带样式的空值时有效 但是还占着位置
另外字体怎么设置呢
demo见附件
4.24 4.28都有问题


Harmonyos Next教程
1 回复

在uni-app中，rich-text组件用于富文本展示，其工作原理是通过解析HTML或Markdown格式的字符串来渲染内容。如果遇到rich-text动态赋值出现BUG的情况，通常可能是由于数据绑定或HTML解析的问题。以下是一些可能的解决方案和代码示例，帮助你定位和解决这些问题。

1. 确保数据正确绑定

首先，确保你正确地绑定了数据到rich-text组件的nodes属性。这里有一个基本的示例：

<template>
  <view>
    <rich-text :nodes="htmlNodes"></rich-text>
    <button @click="updateContent">Update Content</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlNodes: [{
        name: 'div',
        attrs: {
          class: 'div-class',
          style: 'color: red;'
        },
        children: [{
          type: 'text',
          text: 'Hello, World!'
        }]
      }]
    };
  },
  methods: {
    updateContent() {
      this.htmlNodes = [{
        name: 'div',
        attrs: {
          class: 'div-class',
          style: 'color: blue;'
        },
        children: [{
          type: 'text',
          text: 'Content Updated!'
        }]
      }];
    }
  }
};
</script>

2. 使用HTML字符串

如果你使用HTML字符串作为输入，确保HTML字符串的格式正确，并且没有未闭合的标签。以下是一个使用HTML字符串的示例：

<template>
  <view>
    <rich-text :nodes="parseHtml(htmlString)"></rich-text>
    <button @click="changeHtml">Change HTML</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlString: '<div style="color: red;">Hello, World!</div>'
    };
  },
  methods: {
    parseHtml(html) {
      // 这里应该有一个HTML到rich-text nodes的转换逻辑，
      // 但由于uni-app没有直接提供此功能，你可能需要使用第三方库或自定义解析逻辑。
      // 为简化示例，这里假设已经有转换逻辑。
      return this.convertToNodes(html); // 这是一个假设的方法，你需要实现它。
    },
    convertToNodes(html) {
      // 示例：这里应该返回符合rich-text nodes格式的数组
      // 但由于实现复杂，此处省略具体实现
      return [];
    },
    changeHtml() {
      this.htmlString = '<div style="color: blue;">Content Updated!</div>';
    }
  }
};
</script>

注意：在真实项目中，parseHtml和convertToNodes方法需要具体实现，通常这涉及到HTML解析和转换为rich-text组件可以理解的节点格式。由于这部分逻辑较为复杂，且uni-app没有内置此功能，你可能需要借助第三方库或手动实现解析逻辑。

如果以上方法仍然无法解决问题，建议检查uni-app的官方文档或社区，看看是否有已知的BUG或更新，以及是否有其他开发者遇到并解决了类似的问题。

回到顶部