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)

组件属性

组件事件

组件插槽

拓展高亮语言

为了减小打包后的体积，系统默认仅支持以下常用语言

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

组件属性对比