vue:diff库实现文本对比
[*]安装diff库
npm install diff
[*]html
<template>
{{item.value}}
</template>
[*]js
不支持import 语法，module引入
const Diff = require('diff');数据定义
data () {
return {
resultStr: '',
oldStr: `时光静寂，岁月轻柔，~~这是要删除的文本~~拈一颗素心，轻倚季节的转角，
看流年的风轻轻吹过，始终相信，时光可以带走最美的年华，岁月可以刻画老去的颜容，
但那些过往的中的莹亮，那些光阴浸染的情怀，终是停留在记忆深处，
明媚了岁月，芬芳了生命。`,
newStr: `时光静寂，岁月轻柔，拈一颗素心，轻倚季节的转角，
看流年的风轻轻吹过，~~~~~~~这是新增的文本~~~~~~始终相信，时光可以带走最美的年华，岁月可以刻画老去的颜容，
但那些过往的中的莹亮，那些光阴浸染的情怀，终是停留在记忆深处，
明媚了岁月，芬芳了生命。`
}
},数据处理
const d = Diff.diffChars(this.oldStr, this.newStr)
this.resultStr = d
[*]css
.remove {
color: red;
background-color: #fee8e9;
text-decoration: line-through;
}
.add {
color: green;
background-color: #ddffdd;
}
.default {
color: grey;
}
[*]效果图
https://img2022.cnblogs.com/blog/1279426/202206/1279426-20220625105627067-1664023361.png
6.参考文档
https://www.jianshu.com/p/6b8db8b979b3
官方文档：https://www.npmjs.com/package/diff
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]