diff --git a/src/components/Course/courseForm.vue b/src/components/Course/courseForm.vue index 1641dfc3..5cfd48ca 100644 --- a/src/components/Course/courseForm.vue +++ b/src/components/Course/courseForm.vue @@ -75,6 +75,13 @@ + +
+

请选择适合课程内容的标签,最多可选择5个

+

点击任意处关闭此提示

+
@@ -258,6 +265,13 @@ + +
+

请选择适合课程内容的标签,最多可选择5个

+

点击任意处关闭此提示

+
@@ -536,7 +550,9 @@ export default { dlgShow: false }, rightTypeId: {}, - catalogSortDialogShow: false + catalogSortDialogShow: false, + tagTipDialogVisible: false, + isFirstTime: true, }; }, created() { @@ -588,8 +604,52 @@ export default { this.loadResOwners(); this.loadSysTypes(); this.loadUserGroup(); + + // 初始化标签提示 + this.$nextTick(() => { + // 监听 courseTag 组件的焦点事件 + if (this.$refs.courseTag && this.$refs.courseTag.$el) { + this.$refs.courseTag.$el.addEventListener('focus', this.showTagTip, true); + } + }); }, + + beforeDestroy() { + // 清理事件监听器 + document.removeEventListener('click', this.handleGlobalClick); + if (this.$refs.courseTag && this.$refs.courseTag.$el) { + this.$refs.courseTag.$el.removeEventListener('focus', this.showTagTip, true); + } + }, + methods: { + // 显示标签提示对话框 + showTagTip() { + if (this.isFirstTime) { + this.tagTipDialogVisible = true; + // 添加全局点击监听器 + document.addEventListener('click', this.handleGlobalClick); + } + }, + + // 关闭标签提示对话框 + closeTagTip() { + this.tagTipDialogVisible = false; + this.isFirstTime = false; + document.removeEventListener('click', this.handleGlobalClick); + }, + + // 处理全局点击事件 + handleGlobalClick(event) { + // 如果点击的不是标签提示框内部,则关闭提示框 + if (this.tagTipDialogVisible) { + const tipDialog = document.querySelector('.tag-tip-dialog'); + if (tipDialog && !tipDialog.contains(event.target)) { + this.closeTagTip(); + } + } + }, + // 关键字的更改 changeKeywords(option){ if(option.target.value){ @@ -1816,4 +1876,32 @@ export default { } } } + +.tag-tip-dialog { + position: absolute; + top: 100%; + left: 0; + background-color: #fff; + border: 1px solid #ebeef5; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + border-radius: 4px; + padding: 12px; + z-index: 2000; + width: 300px; + margin-top: 5px; + + p { + margin: 0; + line-height: 1.5; + font-size: 14px; + color: #606266; + } + + p:first-child { + color: #303133; + font-weight: 500; + margin-bottom: 5px; + } +} +