标签输入框调整

src/components/Course/courseForm.vue

@@ -604,6 +604,11 @@ export default {
     // 处理标签变化事件
     handleTagsChange(tags) {
       console.log("父组件:",tags)
+      // 限制最多5个标签
+      if (tags.length > 5) {
+        this.$message.warning('最多只能选择5个标签')
+        return
+      }
       let ids = "";
       tags.forEach(tag=>{
         console.log("父组件name : ",tag.tagName)

src/components/Course/courseTag.vue

@@ -25,6 +25,10 @@
         :value="item"
       />
     </el-select>
+    <!-- 添加标签计数显示 -->
+    <div class="tag-count">
+      {{ selectedTags.length }}/5
+    </div>
   </div>
 </template>
 
@@ -46,7 +50,7 @@ export default {
     },
     maxTags: {
       type: Number,
-      default: 10
+      default: 5
     },
     // 添加：接收初始标签数据的props
     initialTags: {
@@ -144,6 +148,8 @@ export default {
       if (!this.searchResults.length && inputVal && this.selectedTags.length < this.maxTags) {
         this.createNewTag(event.target.value.trim())
         event.target.value = ''
+      } else if (this.selectedTags.length >= this.maxTags) {
+        this.$message.warning('最多只能添加5个标签')
       }
     },
 
@@ -165,6 +171,11 @@ export default {
         this.$message.error('标签不能超过8个字')
         return;
       }
+      // 添加标签数量限制检查
+      if (this.selectedTags.length >= this.maxTags) {
+        this.$message.warning('最多只能添加5个标签')
+        return;
+      }
       this.loading = true
       try {
         this.params.courseId = this.courseId;
@@ -231,4 +242,17 @@ export default {
   margin-right: 6px;
   margin-bottom: 6px;
 }
+
+/* 添加标签计数样式 */
+.tag-count {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 12px;
+  color: #999;
+  background: white;
+  padding: 0 5px;
+  pointer-events: none;
+}
 </style>