更新记录

1.0.0（2026-09-15） 下载此版本

初版

平台兼容性

其他

SL-WX-TextDiff 文本对比组件

组件简介

基于 LCS（最长公共子序列）算法实现的字符级文本对比组件。左右两个输入框分别输入文本，组件自动计算差异并以红/绿色高亮标记不一致的字符，同时输出差异字符数、相同字符数和相似度百分比。H5 / 微信小程序通用。

设计说明：组件内置输入框与对比结果展示，差异结果通过 left / right 两个具名插槽暴露分段数据（segments），业务侧可完全自定义结果渲染样式。

目录结构

components/SL-WX-TextDiff
└── SL-WX-TextDiff.vue

核心特性

• LCS 字符级 Diff：基于动态规划求最长公共子序列，回溯得出精确的增删差异，而非简单的逐位比较。
• 双栏对比展示：左侧红色背景显示文本1（标记删除/变更字符），右侧绿色背景显示文本2（标记新增/变更字符），前缀 - / + 标识操作类型。
• 连续段合并：相邻的同类型字符自动合并为一段，避免逐字符碎片化渲染。
• 相似度统计：底部显示差异字符数、相同字符数、相似度百分比（相同字符 / max(len1, len2) × 100）。
• 主题色可配置：diffColor1 / diffColor2 分别控制左右两侧差异高亮色。
• 插槽自定义：left / right 两个具名插槽透传 segments 和 text，可完全替换默认渲染。

Props

Events

Slots

segments 数据结构

[
  { text: '相同内容', type: 'same' },
  { text: '差异内容', type: 'diff' },
  { text: '又相同了', type: 'same' }
]

• type === 'same'：两段文本中相同的字符段
• type === 'diff'：仅存在于当前侧的差异字符段

使用示例

示例 1：基础用法

<template>
  <sl-wx-text-diff
    :text1="text1"
    :text2="text2"
    @update:text1="text1 = $event"
    @update:text2="text2 = $event"
  />
</template>

<script>
import SlWxTextDiff from '@/components/SL-WX-TextDiff/SL-WX-TextDiff.vue'

export default {
  components: { SlWxTextDiff },
  data() {
    return {
      text1: '今天天气真好，适合出去散步',
      text2: '今天天气很好，适合出去走走'
    }
  }
}
</script>

示例 2：自定义差异色

<sl-wx-text-diff
  :text1="text1"
  :text2="text2"
  diff-color1="#ffe0e0"
  diff-color2="#d0f0c0"
  @update:text1="text1 = $event"
  @update:text2="text2 = $event"
/>

示例 3：插槽自定义渲染

<sl-wx-text-diff :text1="text1" :text2="text2">
  <template v-slot:left="{ segments }">
    <view class="my-bar">
      <text
        v-for="(seg, i) in segments"
        :key="i"
        :class="{ 'my-diff': seg.type === 'diff' }"
      >{{ seg.text }}</text>
    </view>
  </template>
  <template v-slot:right="{ segments }">
    <view class="my-bar my-bar--right">
      <text
        v-for="(seg, i) in segments"
        :key="i"
        :class="{ 'my-add': seg.type === 'diff' }"
      >{{ seg.text }}</text>
    </view>
  </template>
</sl-wx-text-diff>

注意事项

1. LCS 算法复杂度：时间复杂度 O(m×n)，m/n 分别为两段文本长度。对于极长文本（数千字符以上）可能出现性能瓶颈，建议控制在合理长度内使用。

2. 相似度计算：公式为 相同字符数 / max(text1长度, text2长度) × 100，两段文本完全相同时为 100%，完全不同时为 0%。

3. 空文本处理：两段文本均为空时，segments 返回空数组，相似度显示 100%。

4. 双向绑定：推荐使用 @update:text1 / @update:text2 事件配合手动赋值，或使用 .sync 修饰符（Vue 2）。