vue 文本比较插件

最新推荐文章于 2024-06-06 09:51:09 发布

weixin_34272308

最新推荐文章于 2024-06-06 09:51:09 发布

阅读量6.9k

点赞数 1

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/openplus/blog/3045663

版权

2019独角兽企业重金招聘Python工程师标准>>>

背景：

最近需要加个统计日志功能，想着能把当前版本和上一版本列出来做比较，所以想到了找个对比插件，期间试过自己通过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://my.oschina.net/openplus/blog/3045663