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 | 展示的方式 | 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
