vue 項目中 文件對比 vue-code-diff 和 DiffMatchPatch

vue 項目中 文件對比

剛開始是用的  vue-code-diff

安裝

npm install vue-code-diff

使用 

      <code-diff
        v-if="oldValue&&newValue"
        :old-string="oldValue"
        :new-string="newValue"
        :context="10"
        outputFormat="side-by-side"
      />


// js代碼

import CodeDiff from 'vue-code-diff'
  components: { CodeDiff },

    data() {
        return {
            oldValue: null,
            newValue: null,
        }
    },

        getText() {
            this.axios({}).then((res) => {
                this.oldValue = res.data.old
                this.newValue = res.data.value
            })
        },

 

 

 

但是當后台接口數據大的時候, 頁面會響應不過來

后面換成了 DiffMatchPatch

<template>
  <div class="diff zy-content">
    <div id="view"></div>
  </div>
</template>

<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/merge/merge.js'
import 'codemirror/addon/merge/merge.css'
import DiffMatchPatch from 'diff-match-patch'
window.diff_match_patch = DiffMatchPatch
window.DIFF_DELETE = -1
window.DIFF_INSERT = 1
window.DIFF_EQUAL = 0

export default {
    name: 'diff',
    props: ['params'],
    data() {
        return {
            oldValue: null,
            newValue: null,
        }
    },
    watch: {
        params: {
            handler: function (val) {
                if (val && val.old) {
                    this.getText(val)
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        initUI() {
            if (!this.oldValue || !this.newValue) return
            let target = document.getElementById('view')
            target.innerHTML = ''
            CodeMirror.MergeView(target, {
                value: this.oldValue, //上次內容
                origLeft: null,
                orig: this.newValue, //本次內容
                lineNumbers: true, //顯示行號
                mode: 'text/html',
                highlightDifferences: true,
                connect: 'align',
                readOnly: true, //只讀 不可修改
            })
        },
        getText(val) {
            this.axios({val}).then((res) => {
                this.oldValue = res.data.old
                this.newValue = res.data.value
            })
        },
    },
}
</script>