v-code-diff 配置

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

Vue2.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 版本新增
相关推荐
专注前端30年3 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴4 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心4 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart4 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao4 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang
Yeats_Liao4 小时前
Go Web 编程快速入门 14 - 性能优化与最佳实践:Go应用性能分析、内存管理、并发编程最佳实践
前端·后端·性能优化·golang
蒜香拿铁4 小时前
Angular【http服务端交互】
前端·http·angular.js
游戏开发爱好者84 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview
universe_014 小时前
前端八股之HTTP
前端·网络协议·http
技术砖家--Felix6 小时前
Spring Boot Web开发篇:构建RESTful API
前端·spring boot·restful