介绍

前端文本比对找了几个库: 分别是: 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展示方式Stringline-by-line(一页显示),side-by-side(两页显示)line-by-line

插件地址:vue-code-diff

Logo

前往低代码交流专区

更多推荐