vue codemirro 文件对比 sql编辑器

效果图：

安装及引用同上一篇文章，请移步：https://www.cnblogs.com/Lu-Lu/p/16265815.html

HTML：

      <el-dialog
          class="diffDialog"
          title="版本对比"
          :visible.sync="sqlDialogVisible"
          width="80%"
          :before-close="handleClose">
          <el-row style="margin-bottom:10px">
            <el-col :span="12">
              <el-select class="selectIpn" v-model="diffOrigValue" placeholder="请选择原始版本" @change="currentVSDialogL">
                <el-option
                  v-for="item in vsOptions"
                  :key="item.sqlVersionId"
                  :label="item.vs"
                  :value="item.sqlVersionId">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="12" style="padding-left:32px">
              <el-select class="selectIpn" v-model="diffComValue" placeholder="请选择对比版本" @change="currentVSDialogR">
                <el-option
                  v-for="item in vsOptions"
                  :key="item.sqlVersionId"
                  :label="item.vs"
                  :value="item.sqlVersionId">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
          <span id="diff"></span>
        </el-dialog>

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


    diffText() {
      let diffBox = document.getElementById('diff')
      diffBox.innerHTML = ''
      CodeMirror.MergeView(diffBox, {
        value: this.diffRight,
        origeLeft: null,
        orig: this.diffLeft,
        lineNumbers: true,
        mode: 'text/x-mysql',
        indentUnit: 2,
        theme: 'cobalt',
        revertButtons:false,//事件比较替换
      })
    },

vue codemirro 文件对比 sql编辑器

推荐阅读