课程标签显示

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;"
+                        type="info"
-                        :style="{ color: isTagMatched(tag) ? '#387DF7' : '#333333' }"
+                        style="margin: 2px 2px; border-radius: 2px;"
                       >
-                        {{ tag }}
+                        <span v-html="highlightTagKeyword(tag)"></span>
                       </el-tag>
                     </div>
                     <!-- 关键字 -->
@@ -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, '<span class="keyword-highlight">$1</span>');
+        }
+      });
+
+      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;
+}
+
+
+
 </style>