vue文本比较插件

1. 安装

npm install codemirror
diff-match-patch diff-match-patch

1. 使用

    

<div id="view"></div>

<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{
        
    }
</script>

methods: {
       initUI() {
            let value = this.old.content, orig2 = this.newData.content

            if (value == null) return;
            let target = document.getElementById("view");
            target.innerHTML = "";
            CodeMirror.MergeView(target, {
                value: value,//上次内容
                origLeft: null,
                orig: orig2,//本次内容
                lineNumbers: true,//显示行号
                mode: "text/html",
                highlightDifferences: true,
                connect: 'align',
                readOnly: true,//只读 不可修改
            });
        },
}

效果图如下：