vue-code-diff

代码比对展示 demo

安装

yarn add 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'
    }
  }
}

参数说明

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | 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

LICENSE

MIT