Diff editor
Line-level LCS diff with split / unified modes, line numbers, and +/- markers.
Basic usage
General-purpose text diff (distinct from the JSON-specific JsonDiff). mode="unified" gives a compact single-column view.
原文修改
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}
45
5greet('world');6greet('world');
<CfDiffEditor :left="oldText" :right="newText" /><CfDiffEditor left={oldText} right={newText} />Unified mode
mode="unified" shows a compact single column: removed lines red, added lines green, unchanged lines white.
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 }
5
6 greet('world');
<CfDiffEditor :left="a" :right="b" mode="unified" /><CfDiffEditor left={a} right={b} mode="unified" />API
| Prop | Type | Default | Description |
|---|---|---|---|
left / right | string | — | Left and right text |
mode | 'split' | 'unified' | 'split' | |
size | 'sm' | 'md' | 'lg' | 'md' | |
showLineNumbers | boolean | true | |
leftLabel / rightLabel | string | 'Original' / 'Modified' | Top title |
反馈与讨论
Diff editor · Discussion