vue3-code-diff
Vue2 / Vue3 可用的 code diff 插件 是 vue-code-diff
安装
# With NPM
npm i v-code-diff
# With Yarn
yarn add v-code-diff
全局注册
import {createApp} from 'vue'
import CodeDiff from 'v-code-diff'
app
.use(CodeDiff)
.mount('#app')
使用
<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 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 。不填会自动判断。 查看全部支持语言 |
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 |
noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF) | boolean | - | false |
实例
main.ts
import CodeDiff from 'v-code-diff'
// use
const app = createApp(App)
app.use(VMdPreview)
app.use(CodeDiff)
vue
const oldContent = ref('123') //存旧内容
const newContent = ref('321') //存新内容
<code-diff
:old-string="oldContent"
:new-string="newContent"
:file-name="rArticle.title"
output-format="line-by-line"
:draw-file-list="true"
:context="1"
/>