Preview Updated 2026-05-10

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}

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

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 }

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

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