diff --git a/src/views/portal/course/Index.vue b/src/views/portal/course/Index.vue index 165841de..bbc0f1bb 100644 --- a/src/views/portal/course/Index.vue +++ b/src/views/portal/course/Index.vue @@ -184,10 +184,10 @@ v-for="(tag, tagIndex) in cinfo.tagsList" :key="tagIndex" size="mini" - type="info" style="margin: 2px 2px; border-radius: 2px;" - :style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }" + type="info" + style="margin: 2px 2px; border-radius: 2px;" > - {{ tag }} + @@ -634,6 +634,38 @@ export default { // window.removeEventListener("scroll", this.handleScroll); }, methods: { + highlightTagKeyword(tag) { + if (!this.stagList || this.stagList.length === 0) { + return tag; // 没有搜索条件时返回原标签 + } + + // 获取所有搜索关键字 + const searchKeywords = this.stagList.map(searchTag => + searchTag.tagName || searchTag.name + ).filter(keyword => keyword && keyword.trim()); + + if (searchKeywords.length === 0) { + return tag; // 没有有效关键字时返回原标签 + } + + let highlightedTag = tag; + + // 对每个搜索关键字进行高亮处理 + searchKeywords.forEach(keyword => { + if (tag.includes(keyword)) { + // 使用正则表达式进行全局不区分大小写的匹配 + const regex = new RegExp(`(${this.escapeRegExp(keyword)})`, 'gi'); + highlightedTag = highlightedTag.replace(regex, '$1'); + } + }); + + return highlightedTag; + }, + // 辅助方法:转义正则表达式特殊字符 + escapeRegExp(string) { + return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); + }, + isTagMatched(tag) { // 检查stagList中是否有匹配的标签 @@ -2579,4 +2611,23 @@ a.custom2 { .course-tag-item[style*="color: #387DF7"] { color: #387DF7 !important; } + +/* 添加关键字高亮样式 */ +.keyword-highlight { + color: #387DF7 !important; + font-weight: bold; +} + +/* 确保标签内的样式正确 */ +.course-tags ::v-deep .el-tag { + color: #333333; +} + +.course-tags ::v-deep .el-tag .keyword-highlight { + color: #387DF7 !important; + font-weight: bold; +} + + +