Vue 3/2 的代码差异插件 - v-code-diff

Vue 3/2 的代码差异插件 - v-code-diff
插件名称 v-code-diff
发布时间 2021年8月19日
插件作者 Shimada666

面向开发人员的 Vue 3/2 代码差异插件。

特征:

  • 逐行或并排输出格式。
  • 按字符或单词突出显示字符串之间的差异。
  • 行号

安装和下载:

# Yarn
$ yarn add v-code-diff

# NPM
$ npm i v-code-diff --save

面向开发人员的 Vue 3/2 代码差异插件。

特征:

  • 逐行或并排输出格式。
  • 按字符或单词突出显示字符串之间的差异。
  • 行号

使用:

1. 导入代码差异插件。

import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'

2. 注册插件。

app
  .use(CodeDiff)
  .mount('#app')

3.在模板中添加code diff组件,定义新旧字符串如下:

<template>
  <code-diff
    :old-string="'旧字符'"
    :new-string="'新字符'"
    file-name="test.txt" />
</template>

4.可用道具。

highlight: {
  type: Boolean,
  default: true
},
oldString: {
  type: String,
  default: ''
},
newString: {
  type: String,
  default: ''
},
context: {
  type: Number,
  default: 10
},
outputFormat: {
  type: String as PropType<'line-by-line' | 'side-by-side'>,
  default: 'line-by-line'
},
drawFileList: {
  type: Boolean,
  default: false
},
renderNothingWhenEmpty: {
  type: Boolean,
  default: false
},
diffStyle: {
  type: String as PropType<'word' | 'char'>,
  default: 'word'
},
fileName: {
  type: String,
  default: ''
},
isShowNoChange: {
  type: Boolean,
  default: false
}

事件

事件名称说明回调参数
before-render渲染前触发
after-render渲染后触发

参数

参数说明类型可选值默认值
highlight控制是否高亮代码booleantrue
old-string陈旧的字符串string
new-string新的字符串string
context不同地方上下间隔多少行不隐藏number
outputFormat展示的方式stringline-by-line,side-by-sideline-by-line
drawFileList展示对比文件列表booleanfalse
renderNothingWhenEmpty当无对比时不渲染booleanfalse
diffStyle差异风格, 单词级差异或字母级差异stringword, charword
fileName文件名string
isShowNoChange当无对比时展示源代码booleanfalse