vue 文本比较插件

用户1409099

修改于 2019-05-14 17:00:56

3.8K0

修改于 2019-05-14 17:00:56

文章被收录于专栏：奕空奕空

背景：

最近需要加个统计日志功能，想着能把当前版本和上一版本列出来做比较，所以想到了找个对比插件，期间试过自己通过js实现，但很费事效果不理想，之后找了 https://github.com/ddchef/vue-code-diff 这个感觉也不是很合适。最终选用的下边这个，不过左右替换的功能不需要，不知如何去掉，有知道的麻烦留言告知。

首先安装插件：codemirror、diff-match-patch
HTML部分：

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

JS部分：

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


// 定义对比方法
methods:
initUI(value,orig2) {
        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,//只读 不可修改
        });
      }

实践效果图：

拓展：

初始化编译器时可设置属性：

value:初始内容 Mode:设置编译器编程语言关联内容，对应的mine值 Theme:编译器的主题，需要引入对应的包 tabSize：tab的空格宽度 lineNumbers：是否使用行号 smartIndent：自动缩进是否开启 indentUnit：缩进单位 keyMap：快捷键，default使用默认快捷键，除此之外包括emacs，sublime，vim快捷键，使用需引入工具

本文转载自：https://www.cnblogs.com/dongxiaolei/p/9454989.html

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

ide