diff --git a/src/components/Course/courseForm.vue b/src/components/Course/courseForm.vue index 5e931716..6874dd94 100644 --- a/src/components/Course/courseForm.vue +++ b/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) diff --git a/src/components/Course/courseTag.vue b/src/components/Course/courseTag.vue index 37851b34..b02dcc98 100644 --- a/src/components/Course/courseTag.vue +++ b/src/components/Course/courseTag.vue @@ -25,6 +25,10 @@ :value="item" /> + +
+ {{ selectedTags.length }}/5 +
@@ -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; +}