🔥 功能列表
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>