v-code-diff 配置

Vue2 / Vue3 可用的 code diff 插件

演示地址： https://shimada666.github.io/v-code-diff/

目录

• 安装
• 开始使用
  • Vue3
  • Vue2
• 组件属性
• 组件事件
• 拓展高亮语言
• 从 0.x 版本迁移

安装

安装 v-code-diff

# npm
npm i v-code-diff

# yarn
yarn add v-code-diff

# pnpm
pnpm add v-code-diff

Vue2.6 及以下用户需要额外安装 composition-api

pnpm add @vue/composition-api

开始使用

Vue3

单独引入

推荐使用，因为对 tree-shaking 有更好的支持。

<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>

注册为全局组件

import { createApp } from 'vue'
import CodeDiff from 'v-code-diff'

app.use(CodeDiff).mount('#app')

然后

<template>
  <code-diff
    old-string="12345"
    new-string="3456"
    output-format="side-by-side"
  />
</template>

Vue2

单独引入

推荐使用，因为对 tree-shaking 有更好的支持。

<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>

注册为全局组件

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

如果您需要的语言不在其中，可以手动引入相关的语言高亮模块

pnpm add highlight.js

单独引入

推荐使用，因为对 tree-shaking 有更好的支持。

<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>

全局注册

import CodeDiff from "v-code-diff"
// Extend C language
import c from "highlight.js/lib/languages/c"

CodeDiff.hljs.registerLanguage("c", c)