vue+vite+diff.js使用小結(jié)
想實現(xiàn)找字符串不同的功能,找到一個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()前后的代碼,結(jié)合/lib/diff中的相應功能代碼自己進行改寫。
到此這篇關(guān)于vue+vite+diff.js使用小結(jié)的文章就介紹到這了,更多相關(guān)vue vite diff.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài)的操作代碼
這篇文章主要介紹了Vue實現(xiàn)登錄保存token并校驗實現(xiàn)保存登錄狀態(tài),本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-02-02基于Vue3+TypeScript的全局對象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用,需要的朋友可以參考下2022-09-09vue elementui el-form rules動態(tài)驗證的實例代碼詳解
在使用elementUI el-form 中,對于業(yè)務不同的時候可能會產(chǎn)生不同表單結(jié)構(gòu),但是都是存在同一個表單控件el-form中。這篇文章主要介紹了vue elementui el-form rules動態(tài)驗證的實例代碼,需要的朋友可以參考下2019-05-05如何解決Vue3組合式API模式下動態(tài)組件不渲染問題
這篇文章主要介紹了如何解決Vue3組合式API模式下動態(tài)組件不渲染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教<BR>2024-03-03keep-alive include和exclude無效問題及解決
這篇文章主要介紹了keep-alive include和exclude無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11