# vue-code-diff

**Repository Path**: kuzank/vue-code-diff

## Basic Information

- **Project Name**: vue-code-diff
- **Description**: 代码对比工具
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 10
- **Forks**: 6
- **Created**: 2020-08-10
- **Last Updated**: 2023-07-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [vue-code-diff](https://www.npmjs.com/package/vue-code-diff)

## TODO

 - [ ] 如果分割字符还是不行，导致文本长度过长，那么久直接强制超过多少换行


> 代码比对展示 [demo](http://diff.xjie.me/)

## 安装
```shell
yarn add vue-code-diff
```

## 使用
```vue
<template>
  <div>
    <code-diff :old-string="oldStr" :new-string="newStr" :context="10" />
  </div>
</template>

import CodeDiff from 'vue-code-diff'
export default {
  components: {CodeDiff},
  data(){
    return {
      oldStr: 'old code',
      newStr: 'new code'
    }
  }
}
```

## 参数说明

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| 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 |


## 效果展示
![](https://tva1.sinaimg.cn/large/007S8ZIlgy1ghlvs3wbunj31nn0u01bk.jpg)


## LICENSE
[MIT](LICENSE)