hp-richtext富文本组件ComponentV2 API升级(对V1版本向下兼容)

与v1版本对比作了哪些升级？

语法

• @Component => @ComponentV2
• @Link @Watch('onUpdateRichTextOption') + @State => @Computed
• @Prop => @Param

v2 API更加简洁，用法更加灵活

import { HPRichTextV2, RichTextOptionModelV2 } from '@ohasasugar/hp-richtext';

@Entry
@Component
struct Index {
  richTextModel: RichTextOptionModelV2 = new RichTextOptionModelV2();

  aboutToAppear() {
    this.richTextModel.richTextOption = {
      baseFontSize: 30,
      content: `
    <a href='https://u.jd.com/R8nDgYF'>点击链接1 </a> 测试链接1<br><a href='https://jingfen.jd.com/item'>点击链接2 </a> 测试链接2<br>测试链接2<br><a href='https://jingfen.jd.com/item.html'>购买 </a>
    `,
      imageProp: {
        webp: true,
      },
    }
    this.richTextModel.needScroll = true;
    this.richTextModel.onLinkPress = (e) => {
      console.log("点击：", JSON.stringify(e))
      return e;
    };
  }

  build() {
    Column() {
      HPRichTextV2({
        richTextModel: this.richTextModel
      })
    }
  }
}

源码结构优化

拆分@Builder构造器节点

如：containerSpanBuilder 构造器:

import type { FancyContainerSpanOptions, SpanBuilderInstall, TextBuilderOptions } from '../index';
import { spanBuilder } from './span';

@Builder
export function containerSpanBuilder($$: TextBuilderOptions, install: SpanBuilderInstall) {
  ContainerSpan() {
    spanBuilder(
      {
        node: $$.node,
        index: $$.index,
        parentNode: $$.parentNode
      },
      {
        defaultArtUI: install.defaultArtUI,
        onLinkPress: install.onLinkPress
      }
    );
  }
  .fancyContainerSpan($$.node.artUIStyleObject || $$.parentNode?.artUIStyleObject)
}

@Extend(ContainerSpan)
function fancyContainerSpan($$: FancyContainerSpanOptions = {}) {
  .textBackgroundStyle({ color: $$.backgroundColor, radius: $$.borderRadius as Dimension | BorderRadiuses })
}

model数据类

import type { CustomHandler, ImageProp } from '../../../common/types';
import type { LinkPressMethod, PixelUnit } from '../index';

export class RichTextOption {
  content: string = '';
  baseFontSize?: number | Resource;
  baseFontColor?: string | Resource;
  basePixelUnit?: PixelUnit;
  basePixelRatio?: number | Resource;
  imageProp?: ImageProp;
  customHandler?: CustomHandler;
}

@ObservedV2
export class RichTextOptionModelV2 {
  // richTextOption变化时自动刷新组件
  @Trace
  richTextOption: RichTextOption = {
    content: '',
  }
  // needScroll变化时自动刷新组件
  @Trace
  needScroll?: boolean = true;
  onLinkPress?: LinkPressMethod;
}

Issues修复

• 修复部分标签未继承baseFontSize、baseFontColor基础样式问题d9f01df
• 节点渲染异常丢失问题#63
• ListItem中遍历渲染组件报错问题#58
• span背景色不生效问题#57

更多链接

• github源码仓库，帮忙点Star支持下～
• OpenHarmony三方库中心仓
• V1文章传送门