Vue前端文本对比DIFF

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/a787373009/article/details/102612947

介绍

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

源码工程地址：DIFF

效果图

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

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

安装

npm install vue-code-diff

使用方式

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)
    ])
  }
}

参数说明

参数	说明	类型	可选值	默认值
old-string	旧值	String	-	-
new-string	新值	String	-	-
context	不同地方上下间隔多少行不隐藏	Number	-	-
outputFormat	展示方式	String	line-by-line(一页显示),side-by-side（两页显示）	line-by-line

插件地址：vue-code-diff