vue 如何對兩個文本比較

一、概述

因項目需求，需要對2個文件進行對比。

 

二、安裝插件

npm i codemirror -S

npm i diff-match-patch -S

 

三、示例

test.vue

<template>
  <div class="compareClass">
    <!-- 代碼版本，差異對比 對話框內容 -->
    <div id="view" style="margin-top:10px"></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: "/*以下爲演示內容，請添加您自己的內容 ~_~ */\n" +
            "\n" +
            "html,\n" +
            "body {\n" +
            "  width: 100%;\n" +
            "  height: 100%;\n" +
            "  margin: 0;\n" +
            "  padding: 0;\n" +
            "  overflow: hidden;\n" +
            "  font-family: 'Fira Mono', helvetica, arial, sans-serif;\n" +
            "  font-weight: 400;\n" +
            "  font-size: 62.5%;\n" +
            "}\n" +
            "\n" +
            "#webgl-container {\n" +
            "  width: 100%;\n" +
            "  height: 100%;\n" +
            "  cursor: pointer;\n" +
            "}\n" +
            "\n" +
            ".loading {\n" +
            "  position: absolute;\n" +
            "  width: 100%;\n" +
            "  height: 100%;\n" +
            "  background-color: #000000;\n" +
            "  opacity: 1;\n" +
            "  -webkit-transition: opacity 1.2s ease-out;\n" +
            "  -o-transition: opacity 1.2s ease-out;\n" +
            "  transition: opacity 1.2s ease-out;\n" +
            "  pointer-events: none;\n" +
            "  z-index: 5;" +
            "}", //上次內容
          origLeft: null,
          orig: ".dialog-footwer {\n" +
            "  text-align: center;\n" +
            "  margin-top: 20px;\n" +
            "}\n" +
            "\n" +
            ".toggle_wrap {\n" +
            "  margin-bottom: 6px;\n" +
            "  height: auto;\n" +
            "  overflow-y: auto;\n" +
            "}\n" +
            ".toggle_wrap_card {\n" +
            "  padding: 0 10px 10px 10px;\n" +
            "}\n" +
            "\n" +
            "/deep/.el-button--success {\n" +
            "  background-color: transparent;\n" +
            "  border-color: #5bacff;\n" +
            "  color: #5bacff;\n" +
            "}\n" +
            "</style>", //本次內容
          lineNumbers: true, //顯示行號
          smartIndent: true, //自動縮進是否開啓\
          indentUnit: 2,
          mode: "shell",
          highlightDifferences: true,
          styleActiveLine: true,
          matchBrackets: true,
          connect: 'align',
          theme: 'cobalt',
          readOnly: 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>

 

訪問頁面，效果如下：