此文章仅用于记录自己项目开发过程中好用的库,非原创 撞车请忽略。
使用场景:文章稿次对比,区别显示出新增、删除的内容。
官网:http://code.google.com/p/google-diff-match-patch/
Github:https://github.com/JanX2/google-diff-match-patch-git-svn
用法:
html引入diff_match_patch.js
<script src="./static/js/diff_match_patch.js"></script>
要使用的index.vue:
<template>
<div>
<div id="view"></div>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
initUI(value,orig2) {
let target = document.getElementById("view");
var dmp = new diff_match_patch();
var d = dmp.diff_main(value,orig2);
dmp.diff_cleanupSemantic(d);
var ds = dmp.diff_prettyHtml(d);
target.innerHTML = ds;
}
},
mounted() {
this.initUI('aaa asd asd aas','aa bb cc')
}
};
</script>