🔥 功能列表

vue3-diff，一个简单的vue3文本比对组件

功能	描述
对比方式	支持单列对比 和 双列对比
隐藏相同行	支持隐藏内容相同的行
对比效果	支持精确到单词 和 精确到字符

📚 参数列表

params	参数值
newString	新的文本内容
oldString	旧的文本内容
context	描述应包含多少行上下文 默认值是 5,设为0时隐藏相同行
outputFormat	输出数据格式:'line-by-line' 单列对比或'side-by-side'双列对比, 默认为'line-by-line'
drawFileList	在 diff 之前显示文件列表:true或者false，默认是true
renderNothingWhenEmpty	如果 diff 在其比较中没有显示任何变化，则不渲染任何内容：true或者false，默认为 false
diffStyle	在每行中显示差异级别:'word'或'char', 默认为'word'

---

✨ 使用介绍

⚔️ 安装指南

依赖安装：

    npm install vue3-diff

📈 使用方法

安装完毕依赖之后，通过引入的方式来使用它：

<template>
  <div id="app">
    <vue3-diff
      :old-string="longText.A"
      :new-string="longText.B"
      :context="context"
      :output-format="outputFormat"
      :draw-file-list="drawFileList"
      :render-nothing-when-empty="renderNothingWhenEmpty"
      :diff-style="diffStyle"
    ></vue3-diff>
  </div>
</template>

<script>

import Vue3Diff from "vue3-diff";

export default {
  name: "App",
  components: {
    Vue3Diff,
  },
  data() {
    return {
      longText: {
        A: `内容1`,
        B: `内容2`,
      },
      outputFormat: "line-by-line",
      context: 10,
      diffStyle: "char",
      isShowNoChange: false,
      drawFileList: true,
      renderNothingWhenEmpty: false,
      hideEqual: false,
    };
  },
};
</script>

<style>
#app {
}
</style>

---