vue 文本比较插件

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

• 背景：

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

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

•  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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！