Vue前端文本对比DIFF_v-code-diff配置参数

介绍

前端文本比对找了几个库: 分别是: CodeMirror、DiffMatchPatch、Mergely、vue-code-diff，最后选择用：vue-code-diff

源码工程地址：DIFF

效果图

文本对比，两页显示效果：

文本对比，一页显示效果：

安装

npm install vue-code-diff
1

使用方式

import VueCodeDiff from 'vue-code-diff'

export default {
  name: 'diff_index',
  data: () => ({
    old_value: "/*以下为演示内容，请添加您自己的内容 ~_~ */\n" ,
    new_value: "/*以下为演示内容，请添加您自己的内容 ^_^ */\n", 
    context: 1000
  }),
  methods: {
    render_side_by_side(h) {
      return h('div', {}, [
        h('div', {
          staticClass: 'text-left text-tertiary font-14 text-weight-bold q-mt-md'
        }, [
          '两页显示对比结果，效果如下所示：'
        ]),
        h(VueCodeDiff, {
          props: {
            oldString: this.old_value,
            newString: this.new_value,
            context: this.context,
            outputFormat: 'side-by-side'
          }
        })
      ])
    },
    render_line_by_line(h) {
      return h('div', {}, [
        h('div', {
          staticClass: 'text-left text-tertiary font-14 text-weight-bold q-mt-md'
        }, [
          '一页显示对比结果，效果如下所示：'
        ]),
        h(VueCodeDiff, {
          props: {
            oldString: this.old_value,
            newString: this.new_value,
            context: this.context,
            outputFormat: 'line-by-line'
          }
        })
      ])
    },
  },
  render(h) {
    return h('div', {
      staticClass: 'q-pa-sm'
    }, [
      this.render_side_by_side(h),
      this.render_line_by_line(h)
    ])
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

参数说明

插件地址：vue-code-diff