提示

src/components/Course/courseForm.vue

@@ -75,6 +75,13 @@
             </el-form-item>
             <el-form-item label="标签" required>
               <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
+              <!-- 标签提示对话框 -->
+              <div v-if="tagTipDialogVisible && isFirstTime"
+                   class="tag-tip-dialog"
+                   @click.stop="closeTagTip">
+                <p>请选择适合课程内容的标签，最多可选择5个</p>
+                <p>点击任意处关闭此提示</p>
+              </div>
             </el-form-item>
             <el-form-item label="资源归属" required>
               <el-input placeholder="请选择" v-model="orgName" >
@@ -258,6 +265,13 @@
                 </el-form-item>
                 <el-form-item label="标签" required>
                   <courseTag ref="courseTag" :courseId="curCourseId" :sysTypeList="sysTypeList" :initialTags="courseTags" @change="handleTagsChange"></courseTag>
+                  <!-- 标签提示对话框 -->
+                  <div v-if="tagTipDialogVisible && isFirstTime"
+                       class="tag-tip-dialog"
+                       @click.stop="closeTagTip">
+                    <p>请选择适合课程内容的标签，最多可选择5个</p>
+                    <p>点击任意处关闭此提示</p>
+                  </div>
                 </el-form-item>
                 <el-form-item label="关键字">
                   <el-input v-model.trim="keywords" maxlength="100" @keyup.enter.native="changeKeywords"  placeholder="请输入关键字"></el-input>
@@ -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;
+  }
+}
+
 </style>