开发预览更新于 2026-05-10

DiffEditor 文本对比

行级 LCS diff，支持 split / unified 双模式，行号 + +/- 标识。

基础用法

通用文本 diff（区别于 JsonDiff 的 JSON 专用版）。mode="unified" 单栏紧凑展示。

1-function greet(name) {

2- return 'Hello ' + name;

1+function greet(name: string): string {

2+ if (!name) return 'Hello stranger';

3+ return `Hello ${name}`;

3}4}

5greet('world');6greet('world');

<CfDiffEditor :left="oldText" :right="newText" />

<CfDiffEditor left={oldText} right={newText} />

mode="unified" 单栏紧凑显示，删除行红、新增行绿、未变行白。

mode = unified

1-function greet(name) {

2- console.log('Hello ' + name);

3- return null;

1+function greet(name: string): string {

2+ if (!name) return 'Hello stranger';

3+ return `Hello ${name}`;

4 }

6 greet('world');

<CfDiffEditor :left="a" :right="b" mode="unified" />

<CfDiffEditor left={a} right={b} mode="unified" />