Vue中XML格式新、旧数据进行比较 vue-code-diff（内容会转为JSON格式展示）

1、概述

在element组件中使用vue-code-diff代码比对组件，比对xml数据

 2、代码实现

先安装vue-code-diff

npm install vue-code-diff -S

还需要安装 vue-json-viewer   x2js

npm install vue-json-viewer

npm install x2js

# 安装
npm install vue-code-diff

# 在需要应用的地方导入引用
# 导入
import CodeDiff from 'vue-code-diff'
import JSONViewer from 'vue-json-viewer'

# 引入组件
components: { CodeDiff , JSONViewer}

因为数据为xml格式所以需要解析转成JSON，这就用到了x2js

main.js

# 导入
import x2js from 'x2js'

Vue.prototype.$x2js = new x2js()

使用

效果

 鼠标移入新内容区域显示比对

差异处会有高亮显示

 

当比较两个内容没有不同时，会不显示，为了能显示出内容建议可以把context值调大

例如    :context="10000"

vue-code-diff 推荐： GitHub - ddchef/vue-code-diff: vue文件差异对比