当前位置：首页 > news >正文

v-code-diff 配置

news 2025/3/13 0:03:54

Vue2 / Vue3 可用的 code diff 插件

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

安装

安装 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><CodeDiffold-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-diffold-string="12345"new-string="3456"output-format="side-by-side"/>
</template>

Vue2

单独引入

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

<template><div><CodeDiffold-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><CodeDiffold-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)

组件属性对比

参数	含义	变更情况
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 版本新增