0.0.5 • Published 11 months ago
vue3-diff v0.0.5
🔥 功能列表
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>