vue+vite+diff.js使用小结
作者:看什么看
本文主要介绍了vue+vite+diff.js使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
想实现找字符串不同的功能,找到一个diff包,功能还挺全,官方示例使用的是这样:
const Diff = require('diff'); const diff = Diff.diffChars(one, other);
但是在vue+vite中使用就不能用require。
进入diff的包找到了解决办法。(我用的是5.1.0,更早的版本不确定能不能这样用)
在vue中这样引入
import {Diff} from 'diff';
使用:
var characterDiff = new Diff(); function diffChars(oldStr, newStr, options) { return characterDiff.diff(oldStr, newStr, options); } diffChars(oriText, resText,{}).forEach( function(part){ console.log(part) if(part.added) { part.value = "<span style='color:#2D93CA;font-size:16px;'>" + part.value + "</span>" }} );
其他的功能类似,要到diff包中的lib/index.mjs文件中找new Diff()前后的代码,结合/lib/diff中的相应功能代码自己进行改写。
到此这篇关于vue+vite+diff.js使用小结的文章就介绍到这了,更多相关vue vite diff.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!