Vue:使用vue-codemirror编写文本比对功能

1.问题描述：对两个文件的文本进行差异比对，文件大小为：小于5M。

2.前端组件调研：

①vue-code-diff：优点：该组件可一次渲染所有差异（差异行有红色和绿色的背景色），差异一目了然。缺点：文本量大时，例如10000行，页面直接崩溃，所以该组件不适合数据量大的文本。不符合要求。

②vue-codemirror :优点:vue-codemirror搭配diff-match-patch可进行大数据量的文本比对（几百万行也不在话下）。缺点：滚动渲染，不会一次渲染所有差异，而是滚动到哪里，稍停片刻，或者缓慢滚动，才会看到差异（差异行有淡黄色背景色，差异文字有红色和绿色波浪线）。所以，拖动滚动条过快时，可能差异还没渲染出来，就已经滚动过去了，不能一目了然的知道有几处差异。

3.解决方案：鉴于vue-code-diff对大数据量不不友好，直接pass掉。选用vue-codemirror搭配diff-match-patch。为了改善“滚动渲染，不会一次渲染所有差异，不能一目了然的知道有几处差异”的缺点，增加文字描述，示例如下：共4处差异，每处差异的开始行号为：2、589、2904、12328。这样用户可拖动滚动条到这些行，当滚动停止时，差异渲染出来，可看到这些行的具体差异。

4.实现效果：

使用codeMorror进行文本比对

使用codeMirror实现文本比对

5.实现步骤如下：

（1）安装插件

npm install vue-codemirror@4.0.6 -S
npm install diff-match-patch -S

（2）导入包

import { codemirror } from "vue-codemirror";
require("codemirror/mode/javascript/javascript.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;

（3）template中

<div><div>{{ diffDescription }}</div><div ref="contrastDiv"></div>
</div>

（4）script中

  data() {return {leftText: "", //左侧展示文本rightText: "", //右侧展示文本diffDescription: "", //差异内容描述};},mounted() {this.prepareData()this.contrast();},methods: {prepareData(){for(let i=0;i<10;i++){this.leftText+='a\n'this.rightText+='b\n'}for(let i=0;i<100;i++){this.leftText+='a\n'this.rightText+='a\n'}for(let i=0;i<10;i++){this.leftText+='abbbbbbbbbbfadsfasfasfasfasfadsfadsfds\n'this.rightText+='bweefdrrsxsssffasfsadfadsfadsfadsfasdfa\n'}for(let i=0;i<10000;i++){this.leftText+='bbb\n'this.rightText+='bbb\n'}for(let i=0;i<10;i++){this.leftText+='a\n'this.rightText+='b\n'}},contrast() {this.$nextTick(() => {const target = this.$refs.contrastDiv;target.innerHTML = "";let difference = CodeMirror.MergeView(target, {value: this.leftText,originLeft: null,orig: this.rightText,lineNumbers: true,mode: "text/html",hightlightDifference: true,connect: "align",readOnly: true,theme: "dracula",smartIndent: true,});let diffCount = difference.right.chunks.length;console.log(diffCount)let description = "";if (diffCount === 0) {description = "左右文本内容一致";} else if (diffCount === 1) {description ="共1处差异，差异的开始行号为：" +(difference.right.chunks[0].origFrom + 1);} else {description = "共" + diffCount + "处差异，每处差异的开始行号为：";for (let i = 0; i < diffCount; i++) {description += difference.right.chunks[i].origFrom + 1;if (i !== diffCount - 1) {description += "、";}}}this.diffDescription=description});},},

有需要的小伙伴快去试试吧！

Vue:使用vue-codemirror编写文本比对功能相关推荐

Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue中使用CodeMirror解析yaml语言
vue中使用CodeMirror解析yaml语言一.CodeMirror插件使用 1.CodeMirror插件安装二.CodeMirror基本配置三.CodeMirror具体使用 1.首先创建一 ...
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战
优秀的富文本编辑器有很多,比如:UEditor,wangEditor 等,但并不是每个都能在移动端有很好的表现. 我们暂且不讨论移动端是否真的需要富文本,既然有这需求,就把它实现出来. 失败的尝试正 ...
vue使用marked解析markdown文本遇到的坑及解决方法
vue使用marked解析markdown文本遇到的坑及解决方法 1. 前言最近在搭建自己的博客网站 https://lyuanzhi.com,不免遇到了要把markdown文本转化为html代码的 ...
Vue中使用quill富文本
安装 npm install vue-quill-editor --save 挂载 vue-quill-editor 插件全局挂载 import Vue from 'vue' import VueQ ...
Vue 中引入markdown富文本编辑器并根据md格式渲染
Vue 中引入markdown富文本编辑器在vue组件中,比较好用的是mavon-editor,github文档地址 https://github.com/hinesboy/mavonEditor ...
vue中使用element-tiptap富文本编辑器
element-tiptap富文本编辑器 npm安装 npm install element-tiptap --save yarn安装 yarn add element-tiptap 全局引入 imp ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
vue h5 端实现富文本图片预览（基于 Vant UI 的 ImagePreview 组件）
文章目录 vue h5 端实现富文本图片预览(基于 Vant UI 的 ImagePreview 组件) 预览效果关键代码使用案例 vue h5 端实现富文本图片预览(基于 Vant UI 的 I ...

Vue:使用vue-codemirror编写文本比对功能

Vue:使用vue-codemirror编写文本比对功能相关推荐

最新文章

热门文章