基于 Vue2.X/Vue3.X 项目引入 vue-code-diff/v-code-diff 代码差异插件并使用
1、Vue2.X的项目
npm i vue-code-diff@1.2.0
父页面：index.vue
<template>
<div style="padding: 100px;">
<CodeDiff />
</div>
</template>
<script>
import CodeDiff from './components/codeDiff'
export default {
components: {
CodeDiff
},
data: () => ({
}),
}
</script>
子组件：codeDiff.vue
<template>
<div class="vue-code-diff">
<code-diff
:old-string="oldValue"
:new-string="newValue"
:context="10"
outputFormat="side-by-side"
/>
</div>
</template>
<script>
import CodeDiff from 'vue-code-diff'
export default {
components: {
CodeDiff
},
data: () => ({
// 旧值
// oldValue: 'Starting ~',
oldValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 520.' +
'吾，当成赤龍之霸王!沉入红莲炼狱，将真红之光辉指引天道！',
// 新值
newValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 1314.' +
'Finished Spring Data repository scanning in 36 ms. Found 0 LDAP repository interfaces.' +
'Started TornaApplication in 4.848 seconds (JVM running for 5.829) ~'
// newValue: 'Starting ~'
}),
watch: {
},
created() {
},
methods: {
/**
* 设置新旧资源值方法句柄
*/
handleSetResourceValues(oldValue, newValue) {
this.oldValue = oldValue;
this.newValue = newValue;
console.log("setResourceValues =>", this.oldValue, this.newValue);
}
}
};
</script>
<style lang="less" scoped>
.vue-code-diff {
margin: 0;
padding: 0;
/deep/ .d2h-wrapper {
.d2h-file-wrapper {
border: unset;
border-radius: unset;
margin-bottom: unset;
.d2h-files-diff {
display: flex;
.d2h-file-side-diff {
position: relative;
overflow: hidden;
background-color: #fee8e9;
.d2h-code-wrapper {
.d2h-diff-table {
.d2h-diff-tbody {
tr {
// 设置表头的第2个单元格大小高度
td:nth-child(2).d2h-info {
width: 100%;
height: 15px;
.d2h-code-side-line {
height: 100%;
}
}
// 当单行溢出换行时，需要把行号的高度撑满
td.d2h-code-side-linenumber {
height: 100%;
}
// 删除代码的变更
td.d2h-del {
.d2h-code-side-line {
.d2h-code-line-ctn {
.hljs {
font-family: "Microsoft YaHei","微软雅黑";
height: auto;
font-size: 14px;
white-space: pre-line; // 代码换行
}
}
}
}
// 新增代码的变更
td.d2h-ins {
.d2h-code-side-line {
.d2h-code-line-ctn {
.hljs {
font-family: "Microsoft YaHei","微软雅黑";
height: auto;
font-size: 14px;
white-space: pre-line; // 单行溢出换行
}
}
}
}
}
}
}
}
}
.d2h-file-side-diff + .d2h-file-side-diff {
background-color: #dfd;
}
}
}
}
}
</style>
2、Vue3.X的项目
npm i v-code-diff@1.3.2
父页面：index.vue
<template>
<div style="padding: 100px;">
<CodeDiff />
</div>
</template>
<script>
import CodeDiff from './components/codeDiff'
export default {
components: {
CodeDiff
},
data: () => ({
}),
}
</script>
子组件：codeDiff.vue
<template>
<div class="v-code-diff">
<code-diff
:old-string="oldValue"
:new-string="newValue"
:context="10"
outputFormat="side-by-side"
/>
</div>
</template>
<script>
import {
CodeDiff } from 'v-code-diff'
export default {
components: {
CodeDiff
},
data: () => ({
// 旧值
// oldValue: 'Starting ~',
oldValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 520.' +
'吾，当成赤龍之霸王!沉入红莲炼狱，将真红之光辉指引天道！',
// 新值
newValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 1314.' +
'Finished Spring Data repository scanning in 36 ms. Found 0 LDAP repository interfaces.' +
'Started TornaApplication in 4.848 seconds (JVM running for 5.829) ~'
// newValue: 'Starting ~'
}),
watch: {
},
created() {
},
methods: {
/**
* 设置新旧资源值方法句柄
*/
handleSetResourceValues(oldValue, newValue) {
this.oldValue = oldValue;
this.newValue = newValue;
console.log("setResourceValues =>", this.oldValue, this.newValue);
}
}
};
</script>
<style lang="less" scoped>
.v-code-diff {
margin: 0;
padding: 0;
}
</style>
3、效果如下
