Vue2 / Vue3 可用的 code diff 插件
演示地址: https://shimada666.github.io/v-code-diff/
目录
安装
安装 v-code-diff
            
            
              bash
              
              
            
          
          # npm
npm i v-code-diff
# yarn
yarn add v-code-diff
# pnpm
pnpm add v-code-diffVue2.6 及以下用户需要额外安装 composition-api
            
            
              shell
              
              
            
          
          pnpm add @vue/composition-api开始使用
Vue3
单独引入
推荐使用,因为对 tree-shaking 有更好的支持。
            
            
              vue
              
              
            
          
          <template>
  <div>
    <CodeDiff
      old-string="12345"
      new-string="3456"
      output-format="side-by-side"
    />
  </div>
</template>
<script setup>
import { CodeDiff } from 'v-code-diff'
</script>注册为全局组件
            
            
              ts
              
              
            
          
          import { createApp } from 'vue'
import CodeDiff from 'v-code-diff'
app.use(CodeDiff).mount('#app')然后
            
            
              vue
              
              
            
          
          <template>
  <code-diff
    old-string="12345"
    new-string="3456"
    output-format="side-by-side"
  />
</template>Vue2
单独引入
推荐使用,因为对 tree-shaking 有更好的支持。
            
            
              vue
              
              
            
          
          <template>
  <div>
    <CodeDiff
      old-string="12345"
      new-string="3456"
      output-format="side-by-side"
    />
  </div>
</template>
<script>
import { CodeDiff } from 'v-code-diff'
export default {
  components: {
    CodeDiff
  }
}
</script>注册为全局组件
            
            
              ts
              
              
            
          
          import Vue from 'vue'
import CodeDiff from 'v-code-diff'
Vue.use(CodeDiff)组件属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 
|---|---|---|---|---|
| language | 代码语言,如 typescript,默认纯文本。 查看全部支持语言 | string | - | plaintext | 
| oldString | 旧的字符串 | string | - | - | 
| newString | 新的字符串 | string | - | - | 
| context | 不同地方上下间隔多少行不隐藏 | number | - | 10 | 
| outputFormat | 展示方式 | string | line-by-line,side-by-side | line-by-line | 
| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word | 
| forceInlineComparison | 细分差异;存在差异时,强制进行行内对比(word 或 char 级) | boolean | - | false | 
| trim | 移除字符串前后空白字符 | boolean | - | false | 
| noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF) | boolean | - | false | 
| maxHeight | 组件最大高度,例如 300px | string | - | undefined | 
| filename | 文件名 | string | - | undefined | 
| newFilename | 新文件文件名 | string | - | undefined | 
| hideHeader | 隐藏头部栏 | boolean | - | false | 
| hideStat | 隐藏头部栏中的统计信息 | boolean | - | false | 
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | light | 
| ignoreMatchingLines | 给出一个模式来忽略匹配行,例如:'(time|token)' | string | - | 
组件事件
| Name | Description | Type | 
|---|---|---|
| diff | diff 完成后触发 | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void | 
组件插槽
| Name | Description | 
|---|---|
| stat | 自定义统计内容,参数为 { stat } | 
拓展高亮语言
为了减小打包后的体积,系统默认仅支持以下常用语言
- plaintext
- xml/html
- javascript
- json
- yaml
- python
- java
- bash
- sql
如果您需要的语言不在其中,可以手动引入相关的语言高亮模块
            
            
              shell
              
              
            
          
          pnpm add highlight.js单独引入
推荐使用,因为对 tree-shaking 有更好的支持。
            
            
              vue
              
              
            
          
          <template>
  <div>
    <CodeDiff
      old-string="#include <stdio.h>"
      new-string="#include <stdio.h>\nint a = 1;"
      output-format="side-by-side"
      language="c"
    />
  </div>
</template>
<script>
import { CodeDiff, hljs } from 'v-code-diff'
import c from 'highlight.js/lib/languages/c'
// Extend C language
hljs.registerLanguage('c', c)
export default {
  components: {
    CodeDiff,
  }
}
</script>全局注册
            
            
              typescript
              
              
            
          
          import CodeDiff from "v-code-diff"
// Extend C language
import c from "highlight.js/lib/languages/c"
CodeDiff.hljs.registerLanguage("c", c)组件属性对比
| 参数 | 含义 | 变更情况 | 
|---|---|---|
| highlight | 控制是否高亮代码 | 1.x 版本移除 | 
| language | 代码语言 | 无 | 
| old-string | 旧的字符串 | 无 | 
| new-string | 新的字符串 | 无 | 
| context | 不同地方上下间隔多少行不隐藏 | 无 | 
| output-format | 展示方式 | 无 | 
| diff-style | 差异风格, 单词级差异或字母级差异 | 无 | 
| drawFileList | 展示对比文件列表 | 1.x 版本移除 | 
| renderNothingWhenEmpty | 当无对比时不渲染 | 1.x 版本移除 | 
| fileName | 文件名 | 1.x 版本更名为 filename | 
| newFilename | 新文件文件名 | 1.x 版本新增 | 
| isShowNoChange | 当无对比时展示源代码 | 1.x 变为默认情况,故移除 | 
| trim | 移除字符串前后空白字符 | 无 | 
| noDiffLineFeed | 忽视不同系统换行符差异 | 无 | 
| theme | 用于切换日间模式/夜间模式 | 1.x 版本新增 |