【前端Vue】log-viewer组件的使用技巧

目录

修改行号和组件的样式

修改高亮显示的内容和颜色

---

 **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组件的使用）