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>

事件

参数

实例

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"
/>