vue-code-diff Vue中格式化对⽐json串插件
安装
yarn add vue-code-diff
或
npm install vue-code-diff
使⽤
<template>
<div>
<code-diff :old-string="oldStr" :new-string="newStr" :context="10" />
</div>
</template>
import CodeDiff from 'vue-code-diff'
export default {
components: {CodeDiff},
data(){
return {
oldStr: 'old code',
newStr: 'new code'
}
},
  mounted() {
    uplist();
浏览器json格式化
  },
  methods: {
    getgrouplist() {
      let oldJSON = {
  measures: [
  {
  metric: 'coverage测试⼀下',
  value: '0.0',
  periods: [{ index: 1, value: '0.0' }],
  component: ' \n \r <br/ > com.umetrip.msg:AirlinesAbnormalTickets',
  },
  {
  metric: 'coverage',
  value: '0.0',
  periods: [{ index: 1, value: '0.0' }],
  component: 'd:AirportDelayReason',
  },
  ],
    }
    let newJSON = {
  measures: [
  {
  metric: 'coverage⼩改动',
  value: '0.0',
  periods: [{ index: 2, value: '0.1' }],
  component: 'com.umetrip.msg:AirlinesAbnormalTickets',
  },
  {
    metric: 'coverage',
    value: '0.0',
    periods: [{ index: 1, value: '0.0' }],
    component: 'd:AirportDelayReason',
    },
    ],
    　}
    　this.oldStr = JSON.stringify(oldJSON, null, 4);
    　wStr = JSON.stringify(newJSON, null, 4);
    },
  }
}
参数说明
参数说明类型可选值默认值old-string陈旧的字符串string——
new-string新的字符串string——context不同地⽅上下间隔多少⾏不隐藏number——outputFormat展⽰的⽅式string line-by-line，side-by-side line-by-line drawFileList展⽰对⽐⽂件列表boolean-false renderNothingWhenEmpty当⽆对⽐时不渲染boolean-false diffStyle每⾏中对⽐差异级别string word, ch
ar word fileName⽂件名string-
isShowNoChange当⽆对⽐时展⽰源代码boolean-false
效果展⽰
line-by-line
side-by-side