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');
<script setup lang="ts">
import { CfDiffEditor } from '@chufix-design/vue';
const left = `function greet(name) {
return 'Hello ' + name;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
</script>
<template>
<CfDiffEditor :left="left" :right="right" />
</template><script setup>
import { CfDiffEditor } from '@chufix-design/vue';
const left = `function greet(name) {
return 'Hello ' + name;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
</script>
<template>
<CfDiffEditor :left="left" :right="right" />
</template>import { CfDiffEditor } from '@chufix-design/react';
export default function Demo() {
const left = `function greet(name) {
return 'Hello ' + name;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
return (
<>
<CfDiffEditor left={left} right={right} />
</>
);
}import { CfDiffEditor } from '@chufix-design/react';
export default function Demo() {
const left = `function greet(name) {
return 'Hello ' + name;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
return (
<>
<CfDiffEditor left={left} right={right} />
</>
);
}Unified mode
mode="unified" shows a compact single column: removed lines red, added lines green, unchanged lines white.
背景 视口
原文
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');
<script setup lang="ts">
import { CfDiffEditor } from '@chufix-design/vue';
const left = `function greet(name) {
console.log('Hello ' + name);
return null;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<div>
<CfDiffEditor :left="left" :right="right" mode="unified" />
</div>
</div>
</template><script setup>
import { CfDiffEditor } from '@chufix-design/vue';
const left = `function greet(name) {
console.log('Hello ' + name);
return null;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
</script>
<template>
<div style="display: flex; flex-direction: column; gap: 16px;">
<div>
<CfDiffEditor :left="left" :right="right" mode="unified" />
</div>
</div>
</template>import { CfDiffEditor } from '@chufix-design/react';
export default function Demo() {
const left = `function greet(name) {
console.log('Hello ' + name);
return null;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
return (
<>
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
<div>
<CfDiffEditor left={left} right={right} mode="unified" />
</div>
</div>
</>
);
}import { CfDiffEditor } from '@chufix-design/react';
export default function Demo() {
const left = `function greet(name) {
console.log('Hello ' + name);
return null;
}
greet('world');`;
const right = `function greet(name: string): string {
if (!name) return 'Hello stranger';
return \`Hello \${name}\`;
}
greet('world');`;
return (
<>
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
<div>
<CfDiffEditor left={left} right={right} mode="unified" />
</div>
</div>
</>
);
}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