差异文本高亮展示（jsdiff实现变更前后对比）"/>
vue实现差异文本高亮展示（jsdiff实现变更前后对比）
最近做企业信用管理模块，需要展示企业信息变更内容，达到对比效果。
选用diff库：
文本
| 变更前 | 变更后 |
|---|---|
| 建筑工程建筑工程、矿山工程、冶金工程、石油化工工程、市政公用工程、公路工程、电力工程施工总承包、建筑机电安装工程、建筑装修装饰工程、防水防腐保温工程、起重设备安装工程、环保工程、隧道工程、消防设施工程、输变电工程、钢结构工程专业承包、园林绿化工程施工；建筑施工劳务；煤炭行业（矿井、选煤厂）设计、建筑行业（建筑工程、人防工程）设计；岩土工程勘察、固体矿产勘察；地质钻探；道路普通货物运输，货物专用运输（罐式容器），大型物件运输（一类）；承包境外建筑工程及境内国际招标工程，以及上述境外工程所需的设备、材料出口，对外派遣实施上述境外工程所需劳务人员；水泥制品制造；铁路专用设备及器材、配件制造；房地产开发，商品房销售。以下范围限分支机构经营：房屋、设备租赁；机械制造、维修；木质防火门生产销售；冷轧带肋钢筋制造；工程测量；地籍测绘。物资材料、设备购销；仓储保管；装卸。 | 建筑工程、矿山工程、冶金工程、石油化工工程、市政公用工程、公路工程、电力工程施工总承包；建筑机电安装工程、建筑装修装饰工程、防水防腐保温工程、起重设备安装工程、环保工程、隧道工程、消防设施工程、输变电工程、钢结构工程专业承包；园林绿化工程施工；建筑施工劳务；煤炭行业（矿井、选煤厂）设计、建筑行业（建筑工程、人防工程）设计；岩土工程勘察、固体矿产勘察、地质钻探；道路普通货物运输、货物专用运输（罐式容器）、大型物件运输（一类）；承包境外建筑工程及境内国际招标工程，以及上述境外工程所需的设备、材料出口，对外派遣实施上述境外工程所需劳务人员；水泥制品制造；铁路专用设备及器材、配件制造；房地产开发，商品房销售；房屋租赁。以下范围限分支机构经营：房屋、设备租赁；机械制造、维修；木质防火门生产销售；冷轧带肋钢筋制造；工程测量；地籍测绘。物资材料、设备购销；仓库保管；装卸。涉及许可经营项目，应取得相关部门许可后方可经营 |
效果图
实现
安装
npm install diff --save
导入库
const Diff = require('diff')
定义data
data () {return {resultStr: []}},mounted () {const d = Diff.diffChars('变更前内容', '变更后内容')console.log(d)this.resultStr = d}
这里的d是一个数组，记录了每一个字符是保持不变、增加、减少。因此实现上述的变更前、后对比只需要调用一次diffChars方法即可，然后遍历数组进行判断展示。
标签展示方式如下：
这里可以再做优化，首先v-show可以优化为v-if，不往页面渲染；其次由于已经有了这个显隐判断，那么在显隐判断中已经隐藏的就不必在三元运算符中再写了
<spanv-for="(item,index) in resultStr":key="index"v-show="!item.removed":class="item.added ? 'green' :item.removed ? 'red' : 'grey'">{{ item.value }}</span>
分割线<hr/>
<spanv-for="(item,index) in resultStr":key="index"v-show="!item.added":class="item.added ? 'green' :item.removed ? 'red' : 'grey'">{{ item.value }}</span>
定义css样式，可以针对新增的、删除的、不变的各自定义样式
.green {color: #f00;
}
.red {color: #f00;
}
更多推荐
vue实现差异文本高亮展示（jsdiff实现变更前后对比）
发布评论