最近开发需求中要用到code差异化：
当场翻车
开始今天主角 [v-code-diff](https://github.com/Shimada666/v-code-diff/blob/master/README-zh.md)和`vue-code-diff`两者都是代码差异化的组件。今天之说`v-code-diff`.不要问什么，没有为什么，就是简单而已。Vue2 / Vue3 都支持的 code diff 插件
### 1、如何使用？
```bash
// 安装 v-code-diff
# With NPM
$ npm i v-code-diff
# With Yarn
$ yarn add v-code-diff
# Vue2 用户需要额外安装 composition-api
$ yarn add @vue/composition-api
```
### 2、使用
* 2.1、Vue2使用
`全局注册`
```js
// app.js
import Vue from 'vue';
import CodeDiff from 'v-code-diff'
Vue.use(CodeDiff);
```
```vue
// 文件中使用
// *.vue
<template>
<code-diff
:old-string="'12345'"
:new-string="'3456'"
file-name="test.txt"
output-format="side-by-side"/>
</template>
```
`局部注册`
```vue
<template>
<code-diff
:old-string="'12345'"
:new-string="'3456'"
file-name="test.txt"
output-format="side-by-side"/>
</template>
<script>
import {CodeDiff} from 'v-code-diff'
export default {
name: 'App',
components: {
CodeDiff
}
}
</script>
```
* 2.2、Vue3使用
`全局注册`
```js
// main.js
import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'
import App from 'App'
const app=createApp(App)
app.use(CodeDiff).mount('#app')
```
```vue
// 文件中使用
// *.vue
<template>
<code-diff
:old-string="'12345'"
:new-string="'3456'"
file-name="test.txt"
output-format="side-by-side"/>
</template>
```
`局部注册`
```vue
// 文件中使用
// *.vue
<template>
<code-diff
:old-string="'12345'"
:new-string="'3456'"
file-name="test.txt"
output-format="side-by-side"/>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
import {CodeDiff} from 'v-code-diff'
export default defineComponent({
components: {
CodeDiff
}
})
</script>
```
* 提供的参数事件
事件
| 事件名称 | 说明 | 回调参数 |
| ------------- | ---------- | -------- |
| before-render | 渲染前触发 | - |
| after-render | 渲染后触发 | - |
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------------- | ------------------------------------------------------------ | ------- | -------------------------- | ------------ |
| highlight | 控制是否高亮代码 | boolean | - | true |
| language | 代码语言，如 `typescript`。不填会自动判断。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string | - | - |
| old-string | 陈旧的字符串 | string | - | - |
| new-string | 新的字符串 | string | - | - |
| context | 不同地方上下间隔多少行不隐藏 | number | - | - |
| outputFormat | 展示的方式 | string | line-by-line，side-by-side | line-by-line |
| drawFileList | 展示对比文件列表 | boolean | - | false |
| renderNothingWhenEmpty | 当无对比时不渲染 | boolean | - | false |
| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word |
| fileName | 文件名 | string | - | - |
| isShowNoChange | 当无对比时展示源代码 | boolean | - | false |
| trim | 移除字符串前后空白字符 | boolean | - | false |
| language | 对比的文本语言 | boolean | - | false |
* 结束
最后欢迎订阅，文章若有不足欢迎指出。
```
```
网友评论