ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue:diff库实现文本对比 [打印本页]

---

作者: 欢乐狗    时间: 2022-8-10 23:02
标题: vue:diff库实现文本对比

• 安装diff库
  

1. npm install diff

复制代码

• html
  

1. <template>
2.   
3.    
4.       {{item.value}}
5.    
6.   
7. </template>

复制代码

• js
  不支持import 语法，module引入
  

1. const Diff = require('diff');

复制代码

数据定义

1. data () {
2.     return {
3.       resultStr: '',
4.       oldStr: `时光静寂，岁月轻柔，~~这是要删除的文本~~拈一颗素心，轻倚季节的转角，
5.       看流年的风轻轻吹过，始终相信，时光可以带走最美的年华，岁月可以刻画老去的颜容，
6.       但那些过往的中的莹亮，那些光阴浸染的情怀，终是停留在记忆深处，
7.       明媚了岁月，芬芳了生命。`,
8.       newStr: `时光静寂，岁月轻柔，拈一颗素心，轻倚季节的转角，
9.       看流年的风轻轻吹过，~~~~~~~这是新增的文本~~~~~~始终相信，时光可以带走最美的年华，岁月可以刻画老去的颜容，
10.       但那些过往的中的莹亮，那些光阴浸染的情怀，终是停留在记忆深处，
11.       明媚了岁月，芬芳了生命。`
12.     }
13.   },

复制代码

数据处理

1. const d = Diff.diffChars(this.oldStr, this.newStr)
2. this.resultStr = d

复制代码

• css
  

1. .remove {
2.   color: red;
3.   background-color: #fee8e9;
4.   text-decoration: line-through;
5. }
6. .add {
7.   color: green;
8.   background-color: #ddffdd;
9. }
10. .default {
11.   color: grey;
12. }

复制代码

• 效果图
  
  6.参考文档
  https://www.jianshu.com/p/6b8db8b979b3
  官方文档：https://www.npmjs.com/package/diff
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4