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 版本新增
相关推荐
杏花春雨江南3 小时前
npm error Could not resolve dependency:
前端·npm·node.js
嫂子的姐夫3 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
Komorebi_99993 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
少吃一口都不行3 小时前
脚手架学习
前端·javascript·学习
地方地方3 小时前
手写JavaScript 深拷贝
前端·javascript
yeyuningzi3 小时前
npm升级提示error engine not compatible with your version of node/npm: npm@11.6.2
前端·npm·node.js
1024小神3 小时前
next 项目中的 'use client' 是什么意思
前端
我是华为OD~HR~栗栗呀3 小时前
24届-Python面经(华为OD)
java·前端·c++·python·华为od·华为·面试
whysqwhw3 小时前
mac上AndroidStudio升级无写入权限问题
前端
wyzqhhhh4 小时前
npm相关知识
前端·npm·node.js