vue-codemirror diff-match-patch 如何增加几个框进行比较

Z时代
2024-02-20
分类：IT

想让234的框和1进行比较代码怎么改哇，如何增加234框
vue-codemirror diff-match-patch 如何增加几个框进行比较

<template>
    <div class="compareClass">
        <!-- 代码版本，差异对比 对话框内容 -->
        <div id="view" style="margin-top:10px">123</div>
    </div>
</template>
<script>
    // 引入全局实例
    import CodeMirror from 'codemirror'
    // 核心样式
    import 'codemirror/lib/codemirror.css'
    // 引入主题后还需要在 options 中指定主题才会生效
    import 'codemirror/theme/idea.css'
    // 需要引入具体的语法高亮库才会有对应的语法高亮效果
    // codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
    // 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
    import 'codemirror/mode/javascript/javascript.js'
    import 'codemirror/mode/css/css.js'
    import 'codemirror/mode/xml/xml.js'
    import 'codemirror/mode/shell/shell.js'
    import 'codemirror/mode/sql/sql.js'
    //代码补全提示
    import 'codemirror/addon/hint/anyword-hint.js';
    import 'codemirror/addon/hint/css-hint.js';
    import 'codemirror/addon/hint/html-hint.js';
    import 'codemirror/addon/hint/javascript-hint.js';
    import 'codemirror/addon/hint/show-hint.css';
    import 'codemirror/addon/hint/show-hint.js';
    import 'codemirror/addon/hint/sql-hint.js';
    import 'codemirror/addon/hint/xml-hint.js';
    //代码版本差异比较
    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: "Code",
        data() {
            return {
            }
        },
        created() {
        },
        mounted() {
            this.$nextTick(() => {
                this.initUI()
            })
        },
        methods: {
            // 初始化
            initUI() {
                let target = document.getElementById("view");
                target.innerHTML = "";
                CodeMirror.MergeView(target, {
                    value: ".123", //上次内容
                    origLeft: null,
                    orig: ".123", //本次内容
                    lineNumbers: true, //显示行号
                        inputStyle: 'contenteditable',//让文本处于可编辑状态
                    smartIndent: false, //自动缩进是否开启\
                    indentUnit: 2,
                    mode: "shell",
                    highlightDifferences: true,
                    styleActiveLine: true,
                    matchBrackets: true,
                    connect: 'align',
                    theme: 'rubyblue',
                    readOnly: false, //只读 不可修改
            allowEditingOriginals: true,
                  fixedGutter:false,
                  lineWrapping: true,
                });
            },
        }
    };
</script>
<style lang="scss" scode>
    .compareClass {
        height: 900px;
        overflow-y: hidden;
        overflow-x: auto;
        ::deep.CodeMirror-merge,
        .CodeMirror-merge .CodeMirror {
            height: 680px;
            overflow-y: hidden;
        }
    }</style>