调试

src/components/Course/courseTag.vue

@@ -1,3 +1,4 @@
+
 <template>
   <div class="tag-container">
     <el-select style="width: 100%;"
@@ -22,8 +23,7 @@
         :key="item.id"
         :label="item.tagName"
         :value="item"
-        :disabled="item.isTip || isTagDisabled(item)"
+        :disabled="isTagDisabled(item)"
-        :class="{'tip-item': item.isTip}"
       />
     </el-select>
     <!-- 添加标签计数显示 -->
@@ -154,7 +154,12 @@ export default {
       this.selectedTags = this.selectedTags.filter(id => id !== tagId)
       this.$emit('change', this.displayTags)
       // 清空输入框内容
-      this.clearInput();
+      if (this.$refs.tagSelect) {
+        const input = this.$refs.tagSelect.$refs.input
+        if (input) {
+          input.value = ''
+        }
+      }
     },
     removeTag(tagId) {
       this.handleTagRemove(tagId)
@@ -179,11 +184,8 @@ export default {
         event.target.value = '';
         return;
       }
-
+      if (!this.searchResults.length && inputVal && this.selectedTags.length < this.maxTags) {
-      // 检查是否有真实的搜索结果（排除提示项）
+        this.createNewTag(event.target.value.trim())
-      const hasRealResults = this.searchResults.some(item => !item.isTip);
-      if (!hasRealResults && inputVal && this.selectedTags.length < this.maxTags) {
-        this.createNewTag(inputVal.trim())
         event.target.value = ''
       } else if (this.selectedTags.length >= this.maxTags) {
         this.$message.warning('最多只能添加5个标签')
@@ -193,7 +195,7 @@ export default {
       }
     },
 
-    // 新增：处理选择变化事件（修改：添加输入框清空逻辑）
+    // 新增：处理选择变化事件
     handleSelectionChange(newValues) {
       // 检查数量限制
       if (newValues.length > this.maxTags) {
@@ -207,23 +209,15 @@ export default {
       this.previousTags = [...newValues];
       this.$emit('change', this.displayTags);
 
-      // 调整2：选择标签后清空输入框
-      this.clearInput();
-    },
-
-    // 新增：清空输入框方法
-    clearInput() {
       if (this.$refs.tagSelect) {
         const input = this.$refs.tagSelect.$refs.input;
         if (input) {
           input.value = '';
-          // 触发输入事件以确保组件状态同步
-          input.dispatchEvent(new Event('input'));
         }
       }
     },
 
-    //创建新标签（修改：创建成功后清空输入框）
+    //创建新标签
     async createNewTag(tagName) {
       // 标签不能超过八个字
       if (tagName.length > 8) {
@@ -267,16 +261,31 @@ export default {
         console.log("----------newTag---------->",this.searchResults)
         this.tagMap.set(newTag.id, newTag)
         this.$emit('change', this.displayTags)
-
-        // 调整2：创建标签成功后清空输入框
         this.clearInput();
       } finally {
         this.loading = false
       }
     },
 
-    // 修改doSearch方法，添加搜索结果为空时的提示（调整1：在下拉列表中显示提示）
+    clearInput() {
+      if (this.$refs.tagSelect) {
+        const input = this.$refs.tagSelect.$refs.input;
+        if (input) {
+          input.value = '';
+          // 触发输入事件以确保组件状态同步
+          input.dispatchEvent(new Event('input'));
+        }
+      }
+    },
+
+
+    // 修改doSearch方法，添加搜索结果为空时的提示
     async doSearch(query) {
+      // 不再在空查询时清空搜索结果
+      // if (!query.trim()) {
+      //   this.searchResults = []
+      //   return
+      // }
       console.log("---- doSearch ------ query = " + query )
       this.loading = true
       try {
@@ -291,16 +300,10 @@ export default {
         tags.forEach(item => {
           this.tagMap.set(item.id, item)
         })
-
-        // 调整1：当搜索结果为空且查询关键词不为空时，在下拉列表中显示提示信息
-        if (tags.length === 0 && query.trim() !== '') {
-          this.searchResults = [{
-            id: 'no-result-tip',
-            tagName: '无此标签，按回车键创建',
-            isTip: true // 标记为提示项，不是真实标签
-          }];
-        } else {
         this.searchResults = tags
+        // 当搜索结果为空时，提示用户可以按回车键创建标签
+        if (tags.length === 0) {
+          this.$message.info('无此标签，按回车键创建')
         }
       } finally {
         this.loading = false
@@ -334,15 +337,4 @@ export default {
   padding: 0 5px;
   pointer-events: none;
 }
-
-/* 提示项的特殊样式 */
-::v-deep .tip-item {
-  color: #999 !important;
-  font-style: italic !important;
-  cursor: default !important;
-}
-
-::v-deep .tip-item:hover {
-  background-color: transparent !important;
-}
 </style>