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}
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="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');
<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
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
left / right | string | — | 双侧文本 |
mode | 'split' | 'unified' | 'split' | |
size | 'sm' | 'md' | 'lg' | 'md' | |
showLineNumbers | boolean | true | |
leftLabel / rightLabel | string | '原文' / '修改' | 顶部标题 |
反馈与讨论
DiffEditor 文本对比 的讨论