Text Compare Vue3

一个强大的文本对比 Vue.js 插件，支持字符级别的差异对比。

特性

• 🎯 精确的字符级别差异对比
• 🎨 自定义样式主题
• 📊 相似度计算
• 🔄 实时对比更新
• ⚡ 高性能算法实现
• 🛡️ 使用 TypeScript 开发
• 📦 支持按需引入
• 🌐 支持 Vue 3

安装

npm install text-compare-vue3
# 或
yarn add text-compare-vue3

使用

全局注册

import { createApp } from 'vue'
import TextCompareVue3 from 'text-compare-vue3'
import App from './App.vue'

const app = createApp(App)
app.use(TextCompareVue3)

局部注册

<template>
  <TextDiff
    :old-text="oldText"
    :new-text="newText"
    :mode="mode"
    :is-different="isDifferent"
    :options="options"
    :show-similarity="true"
  />
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { TextDiff } from 'text-compare-vue3'

export default defineComponent({
  components: {
    TextDiff
  },
  setup() {
    const oldText = ref('这是原始文本')
    const newText = ref('这是新的文本')
    const mode = ref('diff')  // 'diff' | 'full'
    const isDifferent = ref(true)
    
    const options = {
      customColors: {
        commonColor: '#1E90FF',    // 相同文本的颜色
        removedColor: '#FF6347',   // 删除文本的颜色
        addedColor: '#32CD32'      // 新增文本的颜色
      }
    }

    return {
      oldText,
      newText,
      mode,
      isDifferent,
      options
    }
  }
})
</script>

使用 Composable

import { useTextComparison } from 'text-compare-vue3'

const text1 = '这是原始文本'
const text2 = '这是新的文本'

const options = {
  customColors: {
    commonColor: '#1E90FF',    // 相同文本的颜色
    removedColor: '#FF6347',   // 删除文本的颜色
    addedColor: '#32CD32'      // 新增文本的颜色
  }
}

const { diffResult, similarity, styles } = useTextComparison(text1, text2, options)

console.log(similarity) // 相似度百分比
console.log(diffResult) // 差异对比结果
console.log(styles)     // 样式对象

API

TextDiff 组件属性

| 属性 | 类型 | 默认值 | 必填 | 说明 | |------|------|--------|------|------| | oldText | string | '' | 是 | 原始文本 | | newText | string | '' | 是 | 新文本 | | mode | 'diff' | 'full' | 'diff' | 否 | 对比模式：diff-差异对比，full-完全对比 | | isDifferent | boolean | false | 否 | 是否标记为不同（影响样式） | | options | TextComparisonOptions | {} | 否 | 对比配置选项 | | showSimilarity | boolean | true | 否 | 是否显示相似度 |

TextComparisonOptions 配置选项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | customColors | CustomColors | - | 自定义颜色配置 |

CustomColors 颜色配置

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | commonColor | string | 'inherit' | 相同文本的颜色 | | removedColor | string | '#f56c6c' | 删除文本的颜色 | | addedColor | string | '#28a745' | 新增文本的颜色 |

DiffResult 返回结果

interface DiffResult {
  oldParts: DiffPart[]  // 原文的差异部分
  newParts: DiffPart[]  // 新文的差异部分
}

interface DiffPart {
  value: string      // 文本内容
  added?: boolean    // 是否为新增
  removed?: boolean  // 是否为删除
}

示例

基础用法

<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
  />
</template>

自定义颜色

<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
    :options="{
      customColors: {
        commonColor: '#1E90FF',
        removedColor: '#FF6347',
        addedColor: '#32CD32'
      }
    }"
  />
</template>

显示相似度

<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
    :show-similarity="true"
  />
</template>

完全对比模式

<template>
  <TextDiff
    old-text="原始文本"
    new-text="新文本"
    mode="full"
    :is-different="true"
  />
</template>

空值处理

当任意一个文本为空时，会自动标记为红色：

<template>
  <TextDiff
    old-text="原始文本"
    :new-text="''"
  />
</template>

开发

# 安装依赖
npm install

# 运行测试
npm test

# 构建
npm run build

# 代码格式化
npm run format

# 代码检查
npm run lint

许可证

MIT