目錄
修改行號和組件的樣式
修改高亮顯示的內容和顏色
?**log-viewer組件合集**
【前端Vue】如何優雅地展示帶行號的日志文件或文本內容（log-viewer組件的使用）
【前端Vue】使用log-viewer組件時的踩坑記錄
【前端Vue】log-viewer組件的使用技巧
【前端Vue】如何在log-viewer組件中添加搜索定位功能?
修改行號和組件的樣式
以下是默認的log-viewer組件樣式
以下是經過修改過后的log-viewer組件樣式
經過對行號樣式和內容樣式的調整，文件內容顯示器已經變得比較接近ace-editor的美觀程度（如下圖為ace-editor）
但還是有一些差距，可以按照需要進行細微調整，接下來將說明我是如何做出圖中的效果的。
首先是對背景顏色的修改，這里需要修改的是log-content部分修改時也要對鼠標懸停在某一行的樣式進行同步修改也就是.line-wrapper，否則影響觀感，同時細心觀察可以發現字體font-family不一樣，我也做了修改，這幾部分內容都可以在.log-content中進行樣式定義，滾動條scrollbar的修改看需求，我這邊為了美觀做了些修改
.log-content {font-family:'Monaco','Menlo','Ubuntu Mono','Consolas','source-code-pro',monospace !important;position: relative !important;font-size: 12px !important;color: #606266 !important;height: 100%;overflow-y: scroll !important;scrollbar-width: 5px !important;scrollbar-color: #bfc7d7 #ffffff !important;white-space: pre-line !important;width: 100% !important;padding: 0px;background-color: rgb(255, 255, 255) !important;
/*如果不使用這個就會向上圖一樣有懸停黑底效果并且正常顯示時也會受到影響*//* .line-wrapper {color: #606266;&:hover {background-color: #ffffff;}} */
}要保證拓寬行號的顯示寬度以及文本內容與行號的間距，需要對.line-wrapper .line-number進行調整
.line-wrapper .line-number {margin-right: 5px;min-width: 50px !important;
}
如果不調整這部分會是這種效果
因為上方設置了
.log-content .line-wrapper {margin-left: -26px;
}因為不設置的話行號的背景色一旦設置了與內容背景不同色，就會出現一圈邊框。
如果在
.log-content .line-wrapper {margin-left: -26px;
}設置了的情況下不調整這部分的話就會是下面的效果
.line-wrapper .line-number {padding-left: 10px;
}
所以每個部分的調整都需要相互兼顧，不能只調整某個部分。各個部分可以借助瀏覽器進行元素名稱的定位識別，方便有針對性地覆蓋原有樣式，而后直接在引用頁面編寫對應css代碼即可
修改高亮顯示的內容和顏色
如圖是高亮指定文字的顯示效果：
首先要新增一個高亮文字的方法，該方法定義了需要高亮的關鍵詞，并使用正則表達式匹配關鍵詞并應用ANSI轉義序列
applyDefaultHighlight(content) {if (!content) return content;// 定義需要高亮的關鍵詞const keywords = ['time =','res ='];// 對每個關鍵詞應用高亮（只高亮字體，不改變背景）let highlightedContent = content;keywords.forEach(keyword => {// 使用正則表達式匹配關鍵詞并應用ANSI轉義序列（藍色字體）const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'g');highlightedContent = highlightedContent.replace(regex, '\x1b[34m$1\x1b[0m');});return highlightedContent;},注意應用ANSI轉義序列的字體顏色只能使用預設的色號，我這里使用的是藍色，色號會被固定，如果想自定義色號也可以，但原來轉義序列部分要保留，直接在css代碼中編寫覆蓋即可。.log-fore-blue就是對應修改預制的藍色，其他顏色的修改也是一樣的。
.line-content .log-fore-blue {color: #0000ff !important;
}然后再在computed部分編寫方法調用，處理從后端拿來的展示內容，經過上面方法的處理后綁定到log-viewer的:log屬性中
defaultHighlightedLogContent() {if (這部分可以是觸發高亮的條件) {return this.applyDefaultHighlight(this.logContent);}return this.logContent;
},
// 修改高亮顯示的日志內容
highlightedLogContent() {let content = this.logContent;// 應用默認高亮if (這部分可以是觸發高亮的條件) {content = this.applyDefaultHighlight(content);}
},具體的log-viewer組件使用方法可以參考
【前端Vue】如何優雅地展示帶行號的日志文件或文本內容（log-viewer組件的使用）
