【json代码diff效果展示】vue项目 手动实现高仿github的内容diff效果
思考: 对比两个json字符串,维护增删改的三个数组。mt指示:做成git的json做成diff效果即可😁。
·
文章目录
业务需求 :
思考: 对比两个json字符串,维护增删改的三个数组
- 遍历,进行三四五次if判断进入不同数组,渲染页面
- 不对呀,数据展示,怎么根据json对应键展示字段呢???
mt指示:做成git的json做成diff效果即可😁
1-1 vue-code-diff
npm install vue-code-diff -S
<template>
<div class="compare">
<CodeDiff class="center"
:old-string="oldStrToCompare"
:new-string="newStrToCompare"
:drawFileList="true"
:context="1000"
outputFormat="side-by-side" />
</div>
</template>
<script>
import CodeDiff from 'vue-code-diff'
export default {
components: {
CodeDiff,
},
data() {
return {
oldStr: {
'content': 'string',
'createTime': '202303-02T09:42:57.025Z',
'creator': 'string',
'id': 0,
'itemId': 0,
'version': 0
},
newStr: {
'content': 'string',
'createTime': '2023-03-02T09:42:57.025Z',
'creator': 'string',
'id': 0,
'itemId': 0,
'version': 0
}
}
},
computed: {
oldStrToCompare() {
return JSON.stringify(this.oldStr, null, 2) //重点! 格式化添加空格
},
newStrToCompare() {
return JSON.stringify(this.newStr, null, 2)//重点! 格式化添加空格
},
},
}
</script>
<style scoped>
.center {
max-height: 600px;
overflow-y: auto;
}
}
</style>
vue-code-diff : https://github.com/ddchef/vue-code-diff
- 干活,改日再议
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献2条内容
所有评论(0)