开发预览更新于 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');

<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 {
  if (!name) return 'Hello stranger';
  return \`Hello \${name}\`;
}

greet('world');`;
</script>

<template>
  <CfDiffEditor :left="left" :right="right" />
</template>

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

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

Unified 模式

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');

<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>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">mode = unified</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 {
  if (!name) return 'Hello stranger';
  return \`Hello \${name}\`;
}

greet('world');`;
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px;">
    <div>
      <div style="font-size: 11px; color: var(--fg-3); margin-bottom: 4px; font-family: var(--font-mono);">mode = unified</div>
      <CfDiffEditor :left="left" :right="right" mode="unified" />
    </div>
  </div>
</template>

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

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

API

属性	类型	默认值	说明
`left` / `right`	`string`	—	双侧文本
`mode`	`'split' \| 'unified'`	`'split'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`showLineNumbers`	`boolean`	`true`
`leftLabel` / `rightLabel`	`string`	`'原文'` / `'修改'`	顶部标题