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() {
　　　　this.getgrouplist();
　　},
　　methods: {

　　　　getgrouplist() {

　　　　　　let oldJSON = {

                　　measures: [

                    　　{

                       　　 metric: 'coverage测试一下',

                        　　value: '0.0',

                        　　periods: [{ index: 1, value: '0.0' }],

                        　　component: '     <br/ > com.umetrip.msg:AirlinesAbnormalTickets',

                    　　},

                    　　{

                        　　metric: 'coverage',

                        　　value: '0.0',

                        　　periods: [{ index: 1, value: '0.0' }],

                        　　component: 'com.umetrip.etd: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: 'com.umetrip.etd:AirportDelayReason',

                 　　   },

             　　   ],

　　　　　}

　　　　　this.oldStr = JSON.stringify(oldJSON, null, 4);
　　　　　this.newStr = 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, char	word
fileName	文件名	string	-
isShowNoChange	当无对比时展示源代码	boolean	-	false

效果展示

line-by-line

side-by-side