@v2-toolkit/Compare 内容比对组件

简介

这是一个基于 Vue 2 的文本内容比对组件，用于高亮显示两个文本版本之间的差异。组件通过不同颜色和删除线，清晰标识出内容的删除、新增和未改动部分。

安装方法

此组件通过 npm 包管理器分发。在开始前，请确保你的项目是基于 Vue 2 的。

1. 在你的 Vue 项目中安装

打开终端，进入你的项目根目录，运行以下命令：

# 使用 npm
npm install @v2-toolkit/compare

2. 导入并使用组件

在你的 Vue 组件中，可以按需引入：

<template>
  <Compare :old-text="oldContent" :new-text="newContent" />
</template>

<script>
// 导入组件
import Compare from '@v2-toolkit/compare';

export default {
  components: {
    Compare // 注册组件
  },
  data() {
    return {
      oldContent: '这是原始的文档内容。',
      newContent: '这是修改后的最新内容。'
    };
  }
};
</script>

基本使用

安装并导入后，组件即可在模板中直接使用。

属性配置

| 属性名 | 说明 | 类型 | 默认值 | | :--- | :--- | :--- | :--- | | old-text | 原始文本（旧版本） | String / Number | '' | | new-text | 新文本（新版本） | String / Number | '' |

样式颜色配置

你可以通过以下属性自定义对比结果的视觉样式。

| 属性名 | 说明 | 类型 | 默认值 | | :--- | :--- | :--- | :--- | | base-text-color | 未修改文本的颜色 | String | '#000' | | del-text-color | 被删除文本的颜色 | String | '#a8a8a8' | | del-line-color | 删除线的颜色 | String | '#ff4e4f' | | add-text-color | 新增文本的颜色 | String | '#3f60ff' |

样式配置示例

<Compare
  :old-text="oldText"
  :new-text="newText"
  :base-text-color="'#333'"
  :del-text-color="'#f44336'"
  :del-line-color="'#f44336'"
  :add-text-color="'#4caf50'"
/>