vue-code-diff

vue

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: ' \n \r <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展示的方式stringline-by-line,side-by-sideline-by-line
drawFileList展示对比文件列表boolean-false
renderNothingWhenEmpty当无对比时不渲染boolean-false
diffStyle每行中对比差异级别stringword, charword
fileName文件名string- 
isShowNoChange当无对比时展示源代码boolean-false

效果展示

line-by-line

side-by-side

 

以上是 vue-code-diff 的全部内容, 来源链接: utcz.com/z/380735.html

回到顶部